Multi color dotted process image create usign css and html. onloading time different color dotted processing image. this process image css can not load more than gif image. loading process image code provide free at nicesnippets.and you can easly implement in your project. this image supported all the browser.
you can get code of bootstrap loader snippet. we give you example of bootstrap loading spinner , you can simple copy bellow code and use in your project. If it free snippets of bootstrap loading indicator So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code loading spinner css snippets, click on JS Code tab get code of jquery codd for loading spinner html snippets, same as for CSS Code tab. It's pretty easy and simple example of how to make spinner snippet.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="loadind-main">
<ul class="loading1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
.loadind-main{
position: fixed;
background: rgba(255,255,255,0.5);
height: 100%;
width: 100%;
left: 0px;
top: 0px;
}
.loading1 li{
position:absolute;
border-radius: 50%;
}
.loading1 li:nth-child(1){
height:15px;
width:15px;
top:3px;
left:24px;
background-color:#F20075;
animation: color-me-in 5s infinite;
}
.loading1 li:nth-child(2){
height:13px;
width:13px;
top:15px;
left:9px;
background-color:#B84B9E;
animation: color-me-in 5s infinite;
}
.loading1 li:nth-child(3){
height:11px;
width:11px;
top:32px;
left:2px;
background-color:#FFCB00;
animation: color-me-in 5s infinite;
}
.loading1 li:nth-child(4){
height:9px;
width:9px;
top:50px;
left:4px;
background-color:#FF6EB0;
animation: color-me-in 5s infinite;
}
.loading1 li:nth-child(5){
height:7px;
width:7px;
top:66px;
left:14px;
background-color:#32B92D;
animation: color-me-in 5s infinite;
}
.loading1{
border-radius: 50%;
position:relative;
list-style:none;
height:90px;
width:90px;
padding: 0px;
position: fixed;
left: 50%;
top: 50%;
margin: -45px 0px 0px -45px;
-webkit-transition-duration:3s;
-webkit-animation-name: rotate;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-transition-duration:3s;
-moz-animation-name: rotate;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-moz-keyframes rotate{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes color-me-in {
0% {
background:orange;
}
25% {
background:red;
}
50%{
background:blue;
}
75%{
background:yellow;
}
100%{
background:green;
}
}
NiceSnippets.com
