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; } }




Random Post




Related Post

Register and login form page design with animation using bootstrap

Register and login form page design with animation using boo...

you can get free ragister and login form page design free. register and login form design in tab with every refresh different background animation. you can g...

Read More
Pricing table with hover effect using bootstrap example

Pricing table with hover effect using bootstrap example

Nice snippets provide free pricing table code. Bootstrap responsive package pricing table using html and css. pricing table with multiple bang (Littel Bang, Sol...

Read More
Sigin and signup form page design with animation using bootstrap

Sigin and signup form page design with animation using boots...

you can get free sigin and signup form page design free. signup and sigin form design in tab with every refresh different background animation. you can get c...

Read More