SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Code:
    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%loader.png
    
    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;
    Last edited by Paul O'B; Jul 26, 2013 at 14:19. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi, Welcome to Sitepoint

    I'm afraid we will need to see a working version of this before we can begin to sort out what you require. At the least we'd need working css, html , JavaScript and images so that we can see what you have and what you are trying to do. CSS and js on its own mean nothing without the html unless its a very simple request.

    However from the complexity of the code above is seems you are already proficient enough to sort this out yourself or if this is third party code we'd need to see where it came from to give an idea of its use.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •