How to remove borders from loading gif on a dark background?

问题

I'm trying to create a dialog with a loading gif without any borders or background for my web application. I'm using PrimeFaces for JSF. I can't delete the shadow on the border. Here image and code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui">
    <style>
        .loadingPanel .ui-widget-content{
            background: transparent !important;
            border:none !important; 
            box-shadow:none !important; 
        }
    </style>

    <p:dialog widgetVar="loadingDialog" draggable="false" modal="true" closable="false" resizable="false" showHeader="false" styleClass="loadingPanel">
        <p:graphicImage name="images/loading_spinner.gif" library="ecuador-layout" />
    </p:dialog>

</html>

回答1:

The problem is with the GIF format. It doesn't support alpha channel transparency, so the edges of transparent images can look very bad (depending on the background it's displayed on).

Instead of a GIF animation you could use a SVG animation or use an animated icon, for example using PrimeIcons:

<i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>