NiceSnippets.com
Dotted loading image and div usign css and html
Dotted process image create usign css and html. nicesnippets provide custom loading div image. and you can easly implement in your project.
you can get code of bootstrap dotted loader snippet. we give you example of dotted loading gif , you can simple copy bellow code and use in your project. If it free snippets of sinner process images 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 css progress circle snippets, click on JS Code tab get code of jquery codd for css progress bar animation snippets, same as for CSS Code tab. It's pretty easy and simple example of css progress wizard 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>
<ul class="loading2">
<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;
}
.loading1 li:nth-child(2){
height:13px;
width:13px;
top:15px;
left:9px;
background-color:#B84B9E;
}
.loading1 li:nth-child(3){
height:11px;
width:11px;
top:32px;
left:2px;
background-color:#FFCB00;
}
.loading1 li:nth-child(4){
height:9px;
width:9px;
top:50px;
left:4px;
background-color:#FF6EB0;
}
.loading1 li:nth-child(5){
height:7px;
width:7px;
top:66px;
left:14px;
background-color:#32B92D;
}
.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;
}
.loading2{
border-radius: 50%;
position:relative;
list-style:none;
height:50px;
width:50px;
padding: 0px;
position: fixed;
left: 50%;
top: 50%;
margin: -25px 0px 0px -25px;
-webkit-transition-duration:3s;
-webkit-animation-name: seconddotted-rotate;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-transition-duration:3s;
-moz-animation-name: seconddotted-rotate;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
.loading2 li{
position:absolute;
border-radius: 50%;
}
.loading2 li:nth-child(1){
height:7px;
width:7px;
top:1px;
left:14px;
background-color: pink;
}
.loading2 li:nth-child(2){
height:9px;
width:9px;
top:13px;
left:1px;
background-color:yellow;
}
.loading2 li:nth-child(3){
height:11px;
width:11px;
top:29px;
left:3px;
background-color: pink;
}
.loading2 li:nth-child(4){
height:13px;
width:13px;
top:41px;
left:14px;
background-color:green;
}
@-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 seconddotted-rotate{
from {-moz-transform:rotate(360deg);}
to{-moz-transform:rotate(0deg);}
}
@-webkit-keyframes seconddotted-rotate{
from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}
}
