1 reply [Last post]
Surya S
Offline
newbie
chennai
Last seen: 7 years 12 weeks ago
chennai
Timezone: GMT+5.5
Joined: 2013-07-25
Posts: 1
Points: 2

I am having 2 codes,one is working by images and another is working fine by css3 and html5,i cant able to change the color as same as images,how to change the color for the div?

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.html5 and css3 code sample
=============================

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

AttachmentSize
loader.png37.68 KB
surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 35 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

hard to organize the code

Hi, can you separate the HTML code, CSS code & the Javascript.