Simple loading div and you can easaly implement in your project. in this loading you can also change loading image color. this image not load on server.

you can get code of round shape loader snippet. we give you example of animated loading , you can simple copy bellow code and use in your project. If it free snippets of how to make a custom loading icon 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 simple loading animation css snippets, click on JS Code tab get code of jquery codd for css animation loader snippets, same as for CSS Code tab. It's pretty easy and simple example of custom loader css snippet.

<!DOCTYPE html> <html> <head> </head> <body> <div class="loading-div"> <div class="loading-div-effect"></div> </div> </body> </html>
.loading-div{ position: fixed; background: rgba(255,255,255,0.5); height: 100%; width: 100%; top: 0px; } .loading-div-effect{ height:100px; width:100px; border-radius: 50%; border-color: #EC407A #25C6DA #5a5a5a #5DDDD3; border-style: solid; border-width:10px; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; -webkit-transition-duration:1s; -webkit-animation-name: rotate; -webkit-animation-duration:1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transition-duration:1s; -moz-animation-name: rotate; -moz-animation-duration:1s; -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);} }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post