lolio lolio - 1 month ago 33
CSS Question

centering preloader in materialize

Given this :

<div class="preloader-wrapper big 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>




I want to use this preloader with
position:fixed
and centered.So what i did was:

top:50%;
left:50%;
position:fixed;
-webkit-transform:translate(-50%,-50%);


which causes an animation :-/

http://jsfiddle.net/kqjy7jbb/6/

Answer

JSfiddle

.loader {
position: absolute;
top :0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}