Loading Circles

In this example below you will see how to do a Loading Circles with some HTML / CSS and Javascript

Load Effect

Thumbnail
This awesome code was written by natvoc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright natvoc ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
	<span class="uno"></span>
	<span class="dos"></span>
	<span class="tres"></span>
	<span class="cuatro"></span>
	<span class="cinco"></span>
	<span class="seis"></span>
	<div class="loading">
		Loading...
	</div>
</div>

/*Downloaded from https://www.codeseek.co/natvoc/loading-circles-KabzjK */
    @import url('https://fonts.googleapis.com/css?family=Roboto');
body{
	margin: 0 auto; 
	background-color: #0b1c29;
	text-align: center;
}
.container{
	margin-top: 15em;
}
.uno{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: uno;
	animation-delay: 2s;
	animation-iteration-count: 7;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: uno;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: 7;

}
@keyframes uno {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-keyframes uno {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
.dos{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: dos;
	animation-delay: 4s;
	animation-iteration-count: 6;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: dos;
	-webkit-animation-delay: 4s;
	-webkit-animation-iteration-count: 6;
}
@keyframes dos {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-keyframes dos {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
.tres{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: tres;
	animation-delay: 6s;
	animation-iteration-count: 5;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: tres;
	-webkit-animation-delay: 6s;
	-webkit-animation-iteration-count: 5;
}
@keyframes tres {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-keyframes tres {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}

.cuatro{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: cuatro;
	animation-delay: 8s;
	animation-iteration-count: 4;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: cuatro;
	-webkit-animation-delay: 8s;
	-webkit-animation-iteration-count: 4;
}
@keyframes cuatro {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-keyframes cuatro {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
.cinco{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: cinco;
	animation-delay: 10s;
	animation-iteration-count: 3;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: cinco;
	-webkit-animation-delay: 10s;
	-webkit-animation-iteration-count: 3;
}
@keyframes cinco {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-keyframes cinco {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
.seis{
	border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border: 0px solid #000000;
	padding: 5px 13px 5px 13px;	
	margin-left: 1em;
	background-color: #394751;
	animation-duration: 2s;
	animation-name: seis;
	animation-delay: 12s;
	animation-iteration-count: 2;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: seis;
	-webkit-animation-delay: 12s;
	-webkit-animation-iteration-count: 2;
}
@keyframes seis {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
@-webkit-@keyframes seis {
    25%  {background-color: #A5D6A7;}
    50%  {background-color: #66BB6A;}
    100% {background-color: #388E3C;}
}
.loading{
	font-family: 'Roboto', sans-serif;
	margin-top: 0.8em;
	font-size: 1.2em;
	color: #45525c;
}





/*Downloaded from https://www.codeseek.co/natvoc/loading-circles-KabzjK */
    /*
  www.natvoc.com
  @natvoc
  naryari@gmail.com
*/

Comments