How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?


Tags: javascript,html5,css3

Problem :

I am looking for a solution for how to go about animating the following image indicating elapsed time as you see below. To make it easier for explanatory purposes, I would like the animation to take place in 10% intervals (despite me showing the 67% image example.) In effect, the colored gradient you see in the meter would be revealed and perhaps unmasked at these different 10% intervals to show more of the colored gradient. Could I employ some sort of masking technique with a <div> and perhaps some CSS3 transforms? I have this image in different layers in PhotoShop so it is definitely possible for me to manipulate the elements. How should I go about doing this?

This is what it looks like at 67% complete:
enter image description here

..and 100% complete:
enter image description here



Solution :

There are some ways to do it.

The most used lately are with JS and canvas, but there are pure CSS3 methods too. All of these I will post use a complete circle but in your case, you can use as base and edit them to your needs.

JS/Canvas:

CSS3:

For more results, google 'css radial progress bar'.


    CSS Howto..

    How to create a modal popup using javascript and CSS

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How to convert CSS into LESS when there are multiple classes using same properties

    How to remove jquery mobile button color or override button css?

    Understanding how VS parses CSS in .ascx docs

    How to create transparent text on non-transparent background

    How bad is to store all background images in CSS?

    How to solve divs overlapping issue and maintain css fluid layout?

    CSS - How to Draw a Multi-Coloured Line?

    How to place two labels around an image (dynamically); right and bottom?

    How to style 404 page in WAMP server

    How do I make a div link open in a new tab Javascript onClick="window.location

    How to center child divs along each side of a parent div

    how to set a fixed width to textbox which wont be affected by varying value of padding-left?

    How to change css styles on alloy-ui form validator?

    How to change my Mercurial web interface aspect

    CSS how to align one word left and another word right within the same div?

    How to display code on iPhone using HTML/CSS

    How to pass parameter in CSS and then how to apply if..else on that parameter in ASP.NET?

    How to create custom border style in JavaFX CSS?

    How can i return a navmenu button to previous style after clicking another button

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to apply css to an iframe

    CSS - how to make the end of the word blurry?

    background image of div element can't show in php file

    How to make this text bigger?

    How to keep images fixed but also responsive so they don't overlap

    How to change the background-color of jumbrotron?

    How can I remove the border around all the cells in a table?

    Hover over a pre - how to highlight a single line with plain CSS?