I am having 2 codes,one is working by images and another is working fine by css3 and html5,i want to change the sample code of html5 and css3 as same of the sample code of the images ,how to change the color for the div?
1.sample code of the images
1.Image code sample
progress_circle {
width: 136px;
height: 136px;
background-image: url(‘loader.png’);
overflow: hidden;
}
progress_percentage {
margin: 48px 0 0 36px;
font-size: 32px;
color: #006bb7;
text-align: center;
background-color: #fff;
height: 35px;
width: 60px;
}
$(document).ready(function() {
//progressCircle -> outer circle
//progress_percentage -> inner circle
var progressCircle = $(‘#progress_circle’), progressPercentage = $(‘#progress_percentage’), i = 0, timer;
timer = setInterval(function() {
if (i > 100) {
clearInterval(timer);
return;
}
var percentage = i;
progressPercentage.html(percentage+”%”);
// update progress bar every 10%
if ((percentage > Innocent && (percentage % 10 === Innocent) {
// piWidth – width of a single block of the progress bar
progressCircle.css(‘background-position’, ‘-’ + (percentage / 10 * 136) + ‘px 0px’);
}
i++;
}, 100);
});
0%
2.sample code based upon html5 and css3
================================
.loader{
position: relative;
width: 50px;
height: 50px;
float:left;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.loader-bg
{
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.spiner-holder-1
{
position: absolute;
top:0;
left:0;
overflow: hidden;
width: 50%;
height: 50%;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.spiner-holder-2
{
position: absolute;
top:0;
left:0;
overflow: hidden;
width: 100%;
height: 100%;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.loader-spiner
{
width: 200%;
height: 200%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.animate-0-25-a
{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-0-25-b
{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-25-50-a
{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform: rotate(180deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-25-50-b
{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-50-75-a
{
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-50-75-b
{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}
.animate-75-100-a
{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.animate-75-100-b
{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin: 100% 100%;
}
.text
{
text-align: center;
padding-top:26%;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
font-family: Verdana;
}
$(document).ready(function() {
function renderProgress(progress)
{
progress = Math.floor(progress);
if(progress<25){
var angle = -90 + (progress/100)360;
$(“.animate-0-25-b”).css(“transform”,”rotate(“+angle+”deg)”);
}
else if(progress>=25 && progress<50){
var angle = -90 + ((progress-25)/100)360;
$(“.animate-0-25-b”).css(“transform”,”rotate(0deg)”);
$(“.animate-25-50-b”).css(“transform”,”rotate(“+angle+”deg)”);
}
else if(progress>=50 && progress<75){
var angle = -90 + ((progress-50)/100)360;
$(“.animate-25-50-b, .animate-0-25-b”).css(“transform”,”rotate(0deg)”);
$(“.animate-50-75-b”).css(“transform”,”rotate(“+angle+”deg)”);
}
else if(progress>=75 && progress<=100){
var angle = -90 + ((progress-75)/100)360;
$(“.animate-50-75-b, .animate-25-50-b, .animate-0-25-b”).css(“transform”,”rotate(0deg)”);
$(“.animate-75-100-b”).css(“transform”,”rotate(“+angle+”deg)”);
}
if(progress==100){
clearInterval(int);
}
$(“.text”).html(progress+”%”);
}
function clearProgress()
{
$(“.animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b”).css(“transform”,”rotate(90deg)”);
}
var i=0;
var int = setInterval(function (){
i++;
if(i>100) {
i=0
clearProgress();
}
renderProgress(parseInt(i/10) * 10);
}, 200);
});
normal
border-color: rgba(0, 0, 0, 0.2);
border-width: 10px;width: 100px;height: 100px;