{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 何必那么认真 的问题《How to remove borders from loading gif on a dark b》','https://www.manongdao.com/q-936409.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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:
See also: