Menu
Given this :
I want to use this Preloader with position:fixed and centered.So what i did was:
.loader {
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<body>
<div class="preloader-wrapper big active loader">
<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>
</body>which causes an animation :-/
241
As long as your container has a declared width and height this will center the element horizontally and vertically. JSfiddle
.loader {
position: absolute;
top :0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
Slightly changed the loader's style which helps to remove the issue of showing scrollbar intermittently
<div className="preloader-wrapper big active loader">
// spinners
</div>
.loader {
position: absolute;
margin: auto;
top: 50vh;
bottom: 50vh;
left: 0;
right: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
