agneta-angularjs/source/style/page-loader.module.styl

Create your agneta applications with AngularJS

loader-size = 100px;
border-width = 5px;
color = blue;

.page-loader{
  position: fixed;
  z-index: 100;
  padding: 10px;
  left: 50%;
  top: 50%;
  margin-left: - loader-size * 0.5;
  margin-top: - loader-size * 0.5;
  width: loader-size;
  height: loader-size;
  background: white;
  border-radius: 100%;
  text-align: center;
  line-height: loader-size;
  font-size: 20px;

  .loader,
  .loader:after {
    border-radius: 50%;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
  }
  .loader {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: border-width solid color-primary;
    border-right: border-width solid color-primary;
    border-bottom: border-width solid color-primary;
    border-left: border-width solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}