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 free commented 3 years ago

Thank you soooooooo much!


Carlo Wahlstedt free answered 4 years ago


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


Lourens, this is great ;) Diego, you just need to run ShowLoader() or HideLoader() when you need

Diego Vallejo free answered 5 years ago


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

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