Live Demo - Custom process div and image usign html,css and bootstrap

See Free Live Demo example of 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...

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