WCMS Page Loading

The loader style to display in a page currently loading

by piiantom

HTML

<div id="loader">
    <span></span>
    <span></span>
    <span></span>
  </div>

CSS

html, body{height: 100%;}
#loader {
    width: 100px;
    height: 100%;
    position: relative;
    margin: 20px auto 0 auto;
}
#loader:before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    height: 100%;
    width: 1px;
    margin-left: -1px;
}
#loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #46529d;
    margin: 0 5px;
    opacity: .2;
}


#loader span:nth-child(1){
  animation: opacitychange 1s ease-in-out infinite;
}

#loader span:nth-child(2){
  animation: opacitychange 1s ease-in-out 0.25s infinite;
}

#loader span:nth-child(3){
  animation: opacitychange 1s ease-in-out 0.5s infinite;
}

@keyframes opacitychange{
  0%, 50%, 100%{
    opacity: 0.2;
  }

  25%{
    opacity: 1;
  }
}