Preloader script covers content of website.

Topic: Preloader script covers content of website.

pawled free asked 3 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?

Add comment

Grzegorz Bujański staff answered 3 years ago

1 0 Best answer

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

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

pawled free commented 3 years ago

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

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

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

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;
}

Add comment

pawled free answered 3 years ago

0 0 Best answer

How to set custom color of material loader?

Add comment

Grzegorz Bujański staff answered 3 years ago

1 0 Best answer

Please insert min. 20 characters.

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>

Add comment

Tomek Makowski staff answered 3 years ago