How to mark up speedometer/gauge in HTML/CSS?


Tags: html,css

Problem :

As a front-end developer, I've been given a mock-up design to implement. This design features several tachograph-style icons, which have me stumped as to the best way to mark them up in HTML and CSS.

The images look like the following:

enter image description here enter image description here

Obviously these assets represent the empty state and the full state respectively.

My issue is this: how can I mark-up these images so that I can show varying levels of completion, i.e. 10% full, 60% full etc?

Waiting in anticipation to hear your answers.



Solution :

I would seriously recommend looking into the Raphael javascript library. You can knock something like this up in just a few lines of code.

See also this question: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) where I gave an answer including a four-line code sample using Raphael, which provides an animated fuel gauge. You'll need to tweak it for your design, but even then it's only going to be a few lines of code.

The great thing about using Raphael to draw things like this is that it is fully compatible with older browsers, even IE (as far back as IE6 if you need it), without you having to do any special code to support it. It's a great little library.

Hope that helps.


    CSS Howto..

    How to Make a Pentagram with CSS Border Attributes

    How to vertically center text with CSS?

    How to prevent conflicts between css rules

    How to make header cover entire page length?

    How i change the dataTables_filter css class

    HTML+CSS: How to add arrow to horizontal menu items?

    CSS while hover a div how to display other class(or) div?

    How to get body content to center on page using CSS

    How to edit horizantal drop down menu

    CSS: how to set screen layout according to the different dimension

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    How to remove a class as each image is loaded

    How to select all fields from a single box?

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to add multiple CSS elements to a div using jQuery?

    How to inject css into a document via ajax?

    Calculating percentages for 10 or more images in a CSS3 slideshow

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    How to feature detect for CSS custom properties? [duplicate]

    How to create circle, square or triangle with JavaScript in HTML?

    How to make shapes with CSS which have borders?

    CSS How to get rid of border that appears around custom button on and after click

    how to change the background colour of entire body except a sidebar div

    How to load Angular.js form to jsFiddle?

    how to align all text on left side and image on right size

    How do you make 2 YouTube videos automatically play one after the other?

    How can I style this php with divs?

    How to get rid of background when something is clicked

    How to add a CSS specifc for Google Chrome? [duplicate]

    How do I make my div with six different pictures expand outwards when clicking it?