Topic: Preloader script covers content of website.

pawled free asked 2 years ago


The script disappears but later covers the page, preventing any action. I am looking for a solution that will allow you to load a hidden page and then disable the script. How to do it?

What is the easiest way to change colour of material loader?


Grzegorz Bujański staff answered 2 years ago


Hi. Sorry about that. Try adding this code:

CSS:

.hide {
    display: none;
}

JS:

$('#mdb-preloader').on('transitionend', function() {
  $('#mdb-preloader').addClass('hide');
}); 

In the meantime we will also improve it in snippet


pawled free commented 2 years ago

What is the easiest way to create my own preloading page?

For example text above the spinner? When I try to do this, text rotates with the spinner.


Grzegorz Bujański staff commented 2 years ago

You probably add text to an element that is animated (rotates).


pawled free commented 2 years ago

https://mdbootstrap.com/snippets/jquery/mandra/455803

How to put "welcome" above spinner? Everything should be centered vertically and horizontally.


Grzegorz Bujański staff answered 2 years ago


Hi. To set custom color you can remove spinner-blue-only class, add custom-color class and set border-color, opacity and animation in css:

.active .spinner-layer.custom-color {
  border-color: red;
  opacity: 1;
  animation: fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;
}

pawled free answered 2 years ago


How to set custom color of material loader?


Grzegorz Bujański staff answered 2 years ago


To put "welcome" above spinner add flex-column class to <div id="mdb-preloader" class="flex-center"> and welcome text above preloader wrapper:

<!--Big blue-->
    <div id="mdb-preloader" class="flex-center flex-column">
      <p class="white-text">
        Welcome!
      </p>
      <div class="preloader-wrapper active">
        <div class="spinner-layer spinner-blue-only">
          <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 class="my-5 mx-5 flex-center">
      <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Andromeda_Galaxy_%28with_h-alpha%29.jpg" />
    </div>

Tomek Makowski staff answered 2 years ago


Hi

To change color of loader the easiest way is changing class.

Here you have documentation: https://mdbootstrap.com/docs/jquery/components/spinners/

Moreover can you show your code in the snippet editor?

Regards


pawled free commented 2 years ago

https://mdbootstrap.com/snippets/jquery/mandra/455803

Try to save the image.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No