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 commented 4 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 4 years ago
You probably add text to an element that is animated (rotates).
pawled commented 4 years 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 commented 4 years 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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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