Fullscreen Loading Indicator Overlay (Progressbar)


Topic: Fullscreen Loading Indicator Overlay (Progressbar)

Lourens van Rooyen pro asked 6 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 commented 2 years ago

Thank you soooooooo much!


How can I make it work in my site? i still new into this.

Bartłomiej Malanowski staff pro premium answered 5 years ago

Lourens, this is great ;) Diego, you just need to run ShowLoader() or HideLoader() when you need
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 4 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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No