Custom process div and image usign html,css and bootstrap

Bootstrap loading image and div. this loader working usign only html and css. this loading image is responsive. and you can also change image color and animation. this is very professional and it will not take time to loading.

you can get code of custom loader css snippet. we give you example of process image gif , you can simple copy bellow code and use in your project. If it free snippets of show processing div 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 best loader for website snippets, click on JS Code tab get code of jquery codd for loader css snippets, same as for CSS Code tab. It's pretty easy and simple example of css loader animation snippet.

-webkit-transition-duration:1s;
    -webkit-animation-name: spin; 
    -webkit-animation-duration:1s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-transition-duration:1s;
    -moz-animation-name: spin; 
    -moz-animation-duration:1s; 
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function: linear;
}
.loading-div-effect-inner{
    height:68px;
    width:68px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border-width:3px;
    border-color: transparent #EC407A transparent #5DDDD3;
    -webkit-animation-name: spin-inner; 
    -moz-animation-name: spin-inner; 
}
.loading-div-effect-inner1{
    height:37px;
    width:37px;
    margin-top: -25px;
    margin-left: -25px;
    border-radius: 50%;
    border-width:13px;
    border-color: transparent #EC407A transparent #5DDDD3;
    -webkit-animation-name: spin-inner1; 
    -moz-animation-name: spin-inner1; 
}
@-moz-keyframes spin {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin-inner {
    from {-moz-transform: rotate(360deg);}
    to {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes spin-inner {
    from {-webkit-transform: rotate(360deg);}
    to {-webkit-transform: rotate(0deg);}
}

@-moz-keyframes spin-inner1 {
    from {-moz-transform: rotate(360deg);}
    to {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes spin-inner1 {
    from {-webkit-transform: rotate(360deg);}
    to {-webkit-transform: rotate(0deg);}
}

<!DOCTYPE html> <html> <head> </head> <body> <div class="loading-div"> <div class="loading-div-effect"></div> <div class="loading-div-effect-inner"></div> <div class="loading-div-effect-inner1"></div> </div> </body> </html>

.loading-div{ position: fixed; background: rgba(255,255,255,0.5); height: 100%; width: 100%; top: 0px; } .loading-div-effect-inner1, .loading-div-effect-inner, .loading-div-effect{ height:100px; width:100px; border-radius: 50%; border-color: #EC407A transparent #5DDDD3 transparent; border-style: solid; border-width:7px; position: fixed; top: 50%; left: 50%; margin-top: -55px; margin-left: -55px; -webkit-transition-duration:1s; -webkit-animation-name: spin; -webkit-animation-duration:1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transition-duration:1s; -moz-animation-name: spin; -moz-animation-duration:1s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function: linear; } .loading-div-effect-inner{ height:68px; width:68px; margin-top: -30px; margin-left: -30px; border-radius: 50%; border-width:3px; border-color: transparent #EC407A transparent #5DDDD3; -webkit-animation-name: spin-inner; -moz-animation-name: spin-inner; } .loading-div-effect-inner1{ height:37px; width:37px; margin-top: -25px; margin-left: -25px; border-radius: 50%; border-width:13px; border-color: transparent #EC407A transparent #5DDDD3; -webkit-animation-name: spin-inner1; -moz-animation-name: spin-inner1; } @-moz-keyframes spin { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin-inner { from {-moz-transform: rotate(360deg);} to {-moz-transform: rotate(0deg);} } @-webkit-keyframes spin-inner { from {-webkit-transform: rotate(360deg);} to {-webkit-transform: rotate(0deg);} } @-moz-keyframes spin-inner1 { from {-moz-transform: rotate(360deg);} to {-moz-transform: rotate(0deg);} } @-webkit-keyframes spin-inner1 { from {-webkit-transform: rotate(360deg);} to {-webkit-transform: rotate(0deg);} }