Topic: Preloader script covers content of website.
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?
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 pro premium commented 10 months 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 10 months ago
You probably add text to an element that is animated (rotates).
pawled pro premium commented 9 months ago
https://mdbootstrap.com/snippets/jquery/mandra/455803
How to put "welcome" above spinner? Everything should be centered vertically and horizontally.
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>
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 pro premium commented 10 months ago
https://mdbootstrap.com/snippets/jquery/mandra/455803
Try to save the image.
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;
}
Answered
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.19.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No