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 add css 3dtransform property with jquery to a dom element?

    How to load a apply jQuery function upon appending a
    via Ajax?

    how do I get plus sign in rectangle in css?

    How do I move the background image of a DIV based on the scrollbar movement?

    how to use 'selector gadget' to scrape data into R?

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    How can I select complete
  • element in navigation bar when hovered or selected?
  • how to place div next to centered div css

    How to stop some css from getting applied to all
  • tag
  • How to specify BOTH max-width % and px [closed]

    How to decode base64-encoded font information?

    How to change the CSS from the last child?

    How can

    be centered and justified?

    How to place the same image at the top and at the bottom of the same column?

    How to detect a smartphone through JavaScript/CSS?

    How to adjust CSS to make footer fixed height?

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to make a hidden border side inherit border properties in CSS

    How to create a pop-up div on mouse over and stay when click

    How can I center Twitter-Bootstrap 3 navbar buttons?

    Showing different in Internet Explorer and Google Chrome

    Coding the slideshow

    How do I make CSS take into account a sidebar with absolute positioning

    How to hide a whole a
    if table tag is is empty or null?

    how to make background 100% on a top menu

    How to hide href attribute of tag via css when using window.print

    how to pause css animation on hover using jquery

    How important is it to be leaving out the last ';' inside a set of CSS rules

    IE11 CSS bug with clear:right - how to workaround?

    How to change pseudo class property?