how to change the background color of the div using in circular percentage loade

[surya s]

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;

[Paulie_D]

Please create a codepen or jsfiddle demo.

[surya s]

how to upload the images in css tricks

[Paulie_D]

You can’t upload them directly to CSS tricks.

You’ll have to find someone to host them on the web (I use photobucket.com) and then link them like an html image.

A mere image on the forums will not help us diagnose a problem. We need a working example with web linked images in a fiddle or codepen as mentioned before.

[surya s]

ok.first one is the image code sample in the codepen,but i dont know how to set the backgroung image in css3

1.Image code sample

http://codepen.io/anon/pen/gxdha

the images are given below in photobucket,

http://i1302.photobucket.com/albums/ag124/surieas/loader_zpse031f6a2.png

2.html5 and css3 code sample
===========================
the sample code for html5 and css3 is given below in the url,
http://jsfiddle.net/jXMmM/3/

now see the background color for the images that should be apply in the html5 and css3 sample code,now you are able to understand my problem?

[Paulie_D]

Here’s a Codepen with image properly linked and placed for you to work on: http://codepen.io/Paulie-D/pen/DkdGu

[Paulie_D]

Codepen updated.

Please note that I have had to tweak the numbers as you have an image of 11 states that is 1024px wide. that makes some numbers quite specific.

It might be better to use a set of states that are exactly 100px wide with the circle inside which would leave a little breathing room.

[surya s]

see the color of the sample code images,Here’s a Codepen with image properly linked and placed
: http://codepen.io/Paulie-D/pen/DkdGu
like this i want to change the color inthe sample code for html5 and css3 is given below in the url,
http://jsfiddle.net/jXMmM/3/

[Paulie_D]

You mean like this? : http://codepen.io/Paulie-D/pen/HheyL

[surya s]

yes but i dont want the background color black,it should be white and same as sample code of images given below
http://codepen.io/Paulie-D/pen/DkdGu

and also inside the circle the color should be white,

[Paulie_D]

I’m not sure what your issue is but changing the background colors of various elements of (http://codepen.io/Paulie-D/pen/HheyL) is just a matter of tweaking the CSS.

Surely, that can’t be difficult for you?

[surya s]

no i changed the background color of the div,then nothing is visible for me,thats why i am asking you

[Paulie_D]

Try changing some other backgrounds…I can’t do it all for you.

You might start by moving all of the inline css out of the HTML and into the styles area and tidying up.

[surya s]

ok,will try it

[Paulie_D]

Purely for my own education, I’ve stripped out all of the inline CSS and added in a few logical classes to cover all that.

http://codepen.io/Paulie-D/pen/84305c456e121dbfe7f1c900cdc28433

[Author]

Posts