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

Question

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:

enter image description here

<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>

Why do you use a dialog and then remove all styling? Why not 'just' use the image? — Kukeltje, Jun 08 '19 at 10:52
https://www.primefaces.org/showcase/ui/overlay/overlayPanel.xhtml — Kukeltje, Jun 08 '19 at 11:12
The overlayPanel with the same styleClass is not working. I have white background. — Walter Bianchi, Jun 08 '19 at 12:21
This question is confusing. The screenshot suggests that the image file itself is bad, but yet you're asking how to solve it via JSF/CSS .. Actually you should fix the image file itself. Use Photoshop orso to apply transparent fade on the edges. — BalusC, Jun 08 '19 at 16:46
Removed the 'solution' as it should be in answer not an edit of the question — Kukeltje, Jun 10 '19 at 15:11

Jasper de Vries · Answer 1 · 2019-06-23T08:07:55.123

4

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>

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

1 Answers1

Linked