javascript - How to create custom CSS3 loading circle? -

i want create css3 loading circle one:

the inner circle grow using timer.

the problem technique can use grow inner circle way?

i have css code:

.circle { width:100px; height:100px; border-radius:50px; background:#fff; } 

.circle div

the outer circle can used background image because static. never change, inner 1 change according timer.

html

in first example, create 2 div , border-radius property, take circle shape.

<div class="ball"></div> <div class="ball1"></div> 

css

for css style simple, play parameters graphic want, regards animation use transform:rotateproperty.

.ball {     background-color: rgba(0,0,0,0);     border: 5px solid rgba(0,183,229,0.9);     opacity: .9;     border-top: 5px solid rgba(0,0,0,0);     border-left: 5px solid rgba(0,0,0,0);     border-radius: 50px;     box-shadow: 0 0 35px #2187e7;     width: 50px;     height: 50px;     margin: 0 auto;     -moz-animation: spin .5s infinite linear;     -webkit-animation: spin .5s infinite linear; }  .ball1 {     background-color: rgba(0,0,0,0);     border: 5px solid rgba(0,183,229,0.9);     opacity: .9;     border-top: 5px solid rgba(0,0,0,0);     border-left: 5px solid rgba(0,0,0,0);     border-radius: 50px;     box-shadow: 0 0 15px #2187e7;     width: 30px;     height: 30px;     margin: 0 auto;     position: relative;     top: -50px;     -moz-animation: spinoff .5s infinite linear;     -webkit-animation: spinoff .5s infinite linear; }  @-moz-keyframes spin {     0% {         -moz-transform: rotate(0deg);     }      100% {         -moz-transform: rotate(360deg);     }; }  @-moz-keyframes spinoff {     0% {         -moz-transform: rotate(0deg);     }      100% {         -moz-transform: rotate(-360deg);     }; }  @-webkit-keyframes spin {     0% {         -webkit-transform: rotate(0deg);     }      100% {         -webkit-transform: rotate(360deg);     }; }  @-webkit-keyframes spinoff {     0% {         -webkit-transform: rotate(0deg);     }      100% {         -webkit-transform: rotate(-360deg);     }; } 

second example css3 loading animation loop html

the second example same precedent markup, main difference you'll find in css.

<div class="circle"></div> <div class="circle1"></div> 

css

simply in example going act on rotation, , more insert animation allow have pulse effect. effect active in first circle.

.circle {     background-color: rgba(0,0,0,0);     border: 5px solid rgba(0,183,229,0.9);     opacity: .9;     border-right: 5px solid rgba(0,0,0,0);     border-left: 5px solid rgba(0,0,0,0);     border-radius: 50px;     box-shadow: 0 0 35px #2187e7;     width: 50px;     height: 50px;     margin: 0 auto;     -moz-animation: spinpulse 1s infinite ease-in-out;     -webkit-animation: spinpulse 1s infinite linear; }  .circle1 {     background-color: rgba(0,0,0,0);     border: 5px solid rgba(0,183,229,0.9);     opacity: .9;     border-left: 5px solid rgba(0,0,0,0);     border-right: 5px solid rgba(0,0,0,0);     border-radius: 50px;     box-shadow: 0 0 15px #2187e7;     width: 30px;     height: 30px;     margin: 0 auto;     position: relative;     top: -50px;     -moz-animation: spinoffpulse 1s infinite linear;     -webkit-animation: spinoffpulse 1s infinite linear; }  @-moz-keyframes spinpulse {     0% {         -moz-transform: rotate(160deg);         opacity: 0;         box-shadow: 0 0 1px #2187e7;     }      50% {         -moz-transform: rotate(145deg);         opacity: 1;     }      100% {         -moz-transform: rotate(-320deg);         opacity: 0;     }; }  @-moz-keyframes spinoffpulse {     0% {         -moz-transform: rotate(0deg);     }      100% {         -moz-transform: rotate(360deg);     }; }  @-webkit-keyframes spinpulse {     0% {         -webkit-transform: rotate(160deg);         opacity: 0;         box-shadow: 0 0 1px #2187e7;     }      50% {         -webkit-transform: rotate(145deg);         opacity: 1;     }      100% {         -webkit-transform: rotate(-320deg);         opacity: 0;     }; }  @-webkit-keyframes spinoffpulse {     0% {         -webkit-transform: rotate(0deg);     }      100% {         -webkit-transform: rotate(360deg);     }; } 

third example css3 loading animation loop html

in latest example find simple loop animated transform:scale property. markup longer predecessors, can vary according blocks want insert.

<div id="block_1" class="barlittle"></div> <div id="block_2" class="barlittle"></div> <div id="block_3" class="barlittle"></div> <div id="block_4" class="barlittle"></div> <div id="block_5" class="barlittle"></div> 

css

here style easier handle since we're going take apply effect animation:delay property of each block.

.barlittle {     background-color: #2187e7;     background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);     background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);     border-left: 1px solid #111;     border-top: 1px solid #111;     border-right: 1px solid #333;     border-bottom: 1px solid #333;     width: 10px;     height: 10px;     float: left;     margin-left: 5px;     opacity: 0.1;     -moz-transform: scale(0.7);     -webkit-transform: scale(0.7);     -moz-animation: move 1s infinite linear;     -webkit-animation: move 1s infinite linear; }  #block_1 {     -moz-animation-delay: .4s;     -webkit-animation-delay: .4s; }  #block_2 {     -moz-animation-delay: .3s;     -webkit-animation-delay: .3s; }  #block_3 {     -moz-animation-delay: .2s;     -webkit-animation-delay: .2s; }  #block_4 {     -moz-animation-delay: .3s;     -webkit-animation-delay: .3s; }  #block_5 {     -moz-animation-delay: .4s;     -webkit-animation-delay: .4s; }  @-moz-keyframes move {     0% {         -moz-transform: scale(1.2);         opacity: 1;     }      100% {         -moz-transform: scale(0.7);         opacity: 0.1;     }; }  @-webkit-keyframes move {     0% {         -webkit-transform: scale(1.2);         opacity: 1;     }      100% {         -webkit-transform: scale(0.7);         opacity: 0.1;     }; } 

conclusion

i hope tutorial learned how create simple animations loop using css3 properties.