ngactivityindicator/css/ngActivityIndicator.css

Simple Angular.js preloaders provider

.ai-indicator,
.ai-indicator *,
.ai-indicator *:before,
.ai-indicator *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Colors */

.ai-white-spin {
  border-color: rgba(255,255,255,.5) rgba(255,255,255, .5) #fff #fff;
}

.ai-white-parent > * {
  background: #fff;
}

.ai-grey-spin {
  border-color: rgba(189, 195, 199, .5) rgba(189, 195, 199, .5) #bdc3c7 #bdc3c7;
}

.ai-grey-parent > * {
  background: #bdc3c7;
}

.ai-dark-spin {
  border-color: rgba(44, 62, 80, .5) rgba(44, 62, 80, .5) #2c3e50 #2c3e50;
}

.ai-dark-parent > * {
  background: #2c3e50;
}

/* Circled */

.ai-circled {
  height: 32px;
  width: 32px;
  position: relative;
  border-width: 5px;
  border-style: solid;
  border-radius: 100%;
  -webkit-animation: ai-clockwise .6s linear infinite;
  animation: ai-clockwise .6s linear infinite;
}

@-webkit-keyframes ai-clockwise {
  to {
    -webkit-transform: rotate(360deg) translateZ(0);
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes ai-clockwise {
  to {
    -webkit-transform: rotate(360deg) translateZ(0);
    -ms-transform: rotate(360deg) translateZ(0);
    transform: rotate(360deg) translateZ(0);
  }
}

/* Dotted */

.ai-dotted {
  width: 36px;
}

.ai-dotted .ai-inner1,
.ai-dotted .ai-inner2,
.ai-dotted .ai-inner3 {
  display: inline-block;
  margin: 0.125em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 100%;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: ai-rotate .75s linear infinite;
  animation: ai-rotate .75s linear infinite;
}

.ai-dotted .ai-inner2 {
  -webkit-animation-delay: 0.1875s;
  animation-delay: 0.1875s;
}

.ai-dotted .ai-inner3 {
  -webkit-animation-delay: 0.375s;
  animation-delay: 0.375s;
}

@-webkit-keyframes ai-rotate {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  30% {
    -webkit-transform: translateY(-0.25em);
    transform: translateY(-0.25em);
  }

  50% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  70% {
    -webkit-transform: translateY(0.25em);
    transform: translateY(0.25em);
  }
}

@keyframes ai-rotate {
  0% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }

  30% {
    -webkit-transform: translateY(-0.25em);
    -ms-transform: translateY(-0.25em);
    transform: translateY(-0.25em);
  }

  50% {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }

  70% {
    -webkit-transform: translateY(0.25em);
    -ms-transform: translateY(0.25em);
    transform: translateY(0.25em);
  }
}

/* Spinner */

.ai-spinner {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation: ai-rotateThis 1s infinite linear;
  animation: ai-rotateThis 1s infinite linear;
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
}

.ai-spinner > * {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 35px;
  left: 45px;
  border-radius: 50px;
}

@-webkit-keyframes ai-rotateThis {
  from {
    -webkit-transform: scale(0.3) rotate(0deg);
    transform: scale(0.3) rotate(0deg);
  }

  to {
    -webkit-transform: scale(0.3) rotate(360deg);
    transform: scale(0.3) rotate(360deg);
  }
}

@keyframes ai-rotateThis {
  from {
    -webkit-transform: scale(0.3) rotate(0deg);
    -ms-transform: scale(0.3) rotate(0deg);
    transform: scale(0.3) rotate(0deg);
  }

  to {
    -webkit-transform: scale(0.3) rotate(360deg);
    -ms-transform: scale(0.3) rotate(360deg);
    transform: scale(0.3) rotate(360deg);
  }
}

.ai-bar1 {
  -webkit-transform: rotate(0deg) translate(0, -40px);
  -ms-transform: rotate(0deg) translate(0, -40px);
  transform: rotate(0deg) translate(0, -40px);
  opacity: 0.1;
}

.ai-bar2 {
  -webkit-transform: rotate(36deg) translate(0, -40px);
  -ms-transform: rotate(36deg) translate(0, -40px);
  transform: rotate(36deg) translate(0, -40px);
  opacity: 0.2;
}

.ai-bar3 {
  -webkit-transform: rotate(72deg) translate(0, -40px);
  -ms-transform: rotate(72deg) translate(0, -40px);
  transform: rotate(72deg) translate(0, -40px);
  opacity: 0.3;
}

.ai-bar4 {
  -webkit-transform: rotate(108deg) translate(0, -40px);
  -ms-transform: rotate(108deg) translate(0, -40px);
  transform: rotate(108deg) translate(0, -40px);
  opacity: 0.4;
}

.ai-bar5 {
  -webkit-transform: rotate(144deg) translate(0, -40px);
  -ms-transform: rotate(144deg) translate(0, -40px);
  transform: rotate(144deg) translate(0, -40px);
  opacity: 0.5;
}

.ai-bar6 {
  -webkit-transform: rotate(180deg) translate(0, -40px);
  -ms-transform: rotate(180deg) translate(0, -40px);
  transform: rotate(180deg) translate(0, -40px);
  opacity: 0.6;
}

.ai-bar7 {
  -webkit-transform: rotate(216deg) translate(0, -40px);
  -ms-transform: rotate(216deg) translate(0, -40px);
  transform: rotate(216deg) translate(0, -40px);
  opacity: 0.7;
}

.ai-bar8 {
  -webkit-transform: rotate(252deg) translate(0, -40px);
  -ms-transform: rotate(252deg) translate(0, -40px);
  transform: rotate(252deg) translate(0, -40px);
  opacity: 0.8;
}

.ai-bar9 {
  -webkit-transform: rotate(288deg) translate(0, -40px);
  -ms-transform: rotate(288deg) translate(0, -40px);
  transform: rotate(288deg) translate(0, -40px);
  opacity: 0.9;
}

.ai-bar10 {
  -webkit-transform: rotate(324deg) translate(0, -40px);
  -ms-transform: rotate(324deg) translate(0, -40px);
  transform: rotate(324deg) translate(0, -40px);
  opacity: 1;
}