Search code examples
htmlcssmaterialize

centering preloader in materialize

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 :-/

Solution

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