CSS3-Preloader-Circle.markdown

CSS3 Preloader Circle

Here is a CSS3 Loader Circle using the animation property, triangles, and two circles stacked in z-index order.

Forked from Matt Stenquist's Pen CSS3 Preloader Circle.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div class="loader tri"></div>
<div class="loader tri2"></div>
<div class="loader tri3"></div>
<div class="loader tri4"></div>
<div class="loader circ"></div>
<div class="loader circ2"></div>

style.less

// ## TODO 
// -- ASSIGN TRI's to MIXIN VAR
// -- SAME FOR CIRCLE
// -- MAKE MORE FANCY
// -- CLEAN STUFF UP
  
@bg: #2c3e50;

body{
  background: @bg;
}

.loader {
  border-radius: 50%;
  margin: 0 auto;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 50px;
  width: 50px;
}

.tri {
  animation: translateRotation 1.5s infinite reverse;
  -webkit-animation: translateRotation 1.5s infinite reverse;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 0 solid transparent;
  border-bottom: 60px solid #00b4ff;
  width: 0px;
  z-index: 2;
}

.tri2 {
  animation: translateRotation 1.5s infinite;
  -webkit-animation: translateRotation 1.5s infinite;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 40px solid #ffde15;
  width: 0px;
  z-index: 1;
}

.tri3 {
   animation: translateRotation 1.5s infinite;
  -webkit-animation: translateRotation 1.5s infinite;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #1da158;
  border-bottom: 0px solid transparent;
  width: 0px;
  z-index: 1;
}

.tri4 {
   animation: translateRotation 1.5s infinite reverse;
  -webkit-animation: translateRotation 1.5s infinite reverse;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 60px solid #ea343f;
  border-bottom: 0px solid transparent;
  width: 0px;
  z-index: 2;
}

.circ { 
  border: 30px solid rgba(255,255,255,0.1);
}

.circ2 { 
  border: 25px solid rgba(255,255,255,1);
  box-sizing: border-box;
  margin-top: 30px;
  z-index: 90;
}
/* ANIMATE */

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