Creating a radial progress bar with css animation on button click

I've had a big problem trying to achieve this. I don't understand how to animate something so that it turns in a circle so I grabbed a working one from Circle Progress Bar and am trying to find a way to make it animate on button click using jquery. I tried using this tutorial but have no idea how to properly incorporate it. Please help. Here is my Fiddle though it doesn't come close to working.

.progress {
    width:200px;
    height:200px;
    background:#fff;
    border:2px solid #000;
    position:relative;
    margin:50px;
    border-radius:50%;
    overflow:hidden;
    transform: translateZ(0px);
    display:inline-block;
}
.activatedAfter {
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;

}
.activated {

    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -o-animation:turn 4s linear forwards;
    -ms-animation:turn 4s linear forwards;
    animation:turn 4s linear forwards;


}

@-moz-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-webkit-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-o-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-ms-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}

Answers 1

  • I changed $('#progress') to $('.progress') in your fiddle since 'progress' is a class and not an ID. Also, I replaced the activatedAfter style with the activated:after and activated:before styles from the example in the link you provided.

    Also, I added the jQuery library in the code (it was not included in your fiddle)

    Try this

    $('#battleButton').click(function() { 
    	$('.progress').addClass('activated activatedAfter');
    });
    body {
      background-color: #000;
    }
    
    .progress {
        width:200px;
        height:200px;
        background:#fff;
        border:2px solid #000;
        position:relative;
        margin:50px;
        border-radius:50%;
        overflow:hidden;
        transform: translateZ(0px);
        display:inline-block;
    }
    .activated:after {
        position:absolute;
        content:"";
        width:100%;
        height:100%;
        top:0;
        left:-50%;
        background:tomato;
        -moz-animation:turn 4s linear forwards;
        -webkit-animation:turn 4s linear forwards;
        -moz-animation-delay:4s;
        -webkit-animation-delay:4s;
        transform-origin:100% 50%;
        z-index:1;
    }
    .activated:before {
        position:absolute;
        content:"";
        width:100%;
        height:100%;
        top:0;
        left:50%;
        background:tomato;
        -moz-animation:turn 4s linear forwards;
        -webkit-animation:turn 4s linear forwards;
        -o-animation:turn 4s linear forwards;
        -ms-animation:turn 4s linear forwards;
        animation:turn 4s linear forwards;
        transform-origin:0% 50%;
        z-index:2;
    }
    
    @-moz-keyframes turn {
        99.9% {
            transform:rotate(180deg);
            background:tomato;
        }
        100% {
            background:#fff;
        }
    }
    @-webkit-keyframes turn {
       99.9% {
            transform:rotate(180deg);
            background:tomato;
        }
        100% {
            background:#fff;
        }
    }
    @-o-keyframes turn {
        99.9% {
            transform:rotate(180deg);
            background:tomato;
        }
        100% {
            background:#fff;
        }
    }
    @-ms-keyframes turn {
       99.9% {
            transform:rotate(180deg);
            background:tomato;
        }
        100% {
            background:#fff;
        }
    }
    @keyframes turn {
       99.9% {
            transform:rotate(180deg);
            background:tomato;
        }
        100% {
            background:#fff;
        }
    }
    
    button {
      background-color: rgba(0, 0, 0, 0);
      border-color: #81ff14;
      color: #81ff14;
      border-radius: 10%;
      float: right;
      margin-right: 100px;
      margin-top: 15px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="progress"></div>
    <button id="battleButton">Battle</button>


Related Articles