Fullscreen Loading Indicator Overlay (Progressbar)

Topic: Fullscreen Loading Indicator Overlay (Progressbar)

Lourens van Rooyen pro asked 7 years ago

I was looking for a full-screen loading indicator that I can toggle on and off when needed. Below is my solution, hope someone will find the below code useful :) Multicolor Fullscreen Processbar Overlay function ShowLoader() { var overlay = jQuery('<div id="loading-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); z-index: 10000;"><div style="text-align: center; width: 100%; position: absolute; top: 40%; margin-top: -50px;"> <div class="preloader-wrapper big active"> <div class="spinner-layer spinner-blue"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-red"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-yellow"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-green"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> </div> </div>'); overlay.appendTo(document.body); } function HideLoader() { $('#loading-overlay').remove(); }

Danielle De Santana free commented 4 years ago

Thank you soooooooo much!

Add comment

Carlo Wahlstedt free answered 6 years ago

0 0 Best answer

FYI, doesn't look like this is working now. Copy, pasted, replaced the characters (' and ") that didn't paste properly, but it just shows an overlay without a spinner.

Piotr Glejzer staff commented 6 years ago

Hi, It's not working correctly on MDB Free version. This component - progress circle is now only in PRO version. If you wanna use it I recommend to you to stock up on with our amazing PRO version :). That script is working very well when you have pro version. Best, Piotr

Add comment

Bartłomiej Malanowski staff answered 7 years ago