Intellect loading

css for loading intellect

by Rohit Bisht

HTML

<div class="lds-css ng-scope">
  <div style="width:60px;height:60px" class="lds-double-ring">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes lds-double-ring_reverse_2 {
  0% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

@-webkit-keyframes lds-double-ring_reverse_2 {
  0% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.lds-double-ring {
  position: relative;
}

.lds-double-ring div {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  border: 4px solid #000;
  border-color: #DA4732 transparent #DA4732 transparent;
  -webkit-animation: lds-double-ring 3.5s linear infinite;
  animation: lds-double-ring 3.5s linear infinite;
}
.lds-double-ring {
  width: 168px !important;
  height: 168px !important;
  -webkit-transform: translate(-84px, -84px) scale(0.84) translate(84px, 84px);
  transform: translate(-84px, -84px) scale(0.84) translate(84px, 84px);
}