Simple CSS Target Progress Tracker

(2 customer reviews)


Buy any 3 plugins for a 20% discount (excludes sale items)

There are a number of plugins on WordPress that displays thermometer type targets for things like fundraising or reaching parts of a goal or course. There are plenty of straight-line bars to in order to show how far along the path you are to reaching your target. But have you ever wanted one of those snazzy circular progress tracker graphics and wanted it to be fast loading and based purely on CSS.

Well, now you can. An awesome shout out to Andre Firchow who developed the CSS for this type of target bar. But for those who are not particularly technical, this plugin does all the hard work for you. You just use a shortcode with attributes and the plugin works out the percentage completed and displays the correct CSS. 

Trendy circular progress tracker in CSS

WordPress is all about ease of use for non-technical developers and this plugin is ideal for those running fundraising projects and other web sites that need to measure the distance to a goal.

An example of the display for a £1,000 target which you have raised £213 towards would be:

[ csstarget full=”1000″ reach=”213″ ] and this would give;


All you need to do is;

  • call the shortcode with csstarget,
  • call the full target attribute (whole number with no symbol),
  • call the amount you have so far reached (whole number with no symbol),
  • call the size of the graphic  (leave blank for medium, small for smaller, big for larger)

So a larger version of the circular target graphic would be called by the shortcode;

[ csstarget full=”1000″ reach=”213″ size=”big”]

which gives:

 The full graphic CSS is contained within a div id called csstrg which can be used to position and size the graphic. 

To change the colour of the graphic you can use css to override the blue by using:

  • .c100:hover > span {color:#xxxxxx!important;} changes the colour of the figure on mouse over.
  • .bar, .fill {border-color:#xxxxxx!important;} changes the colour of the filled bar. Remeber to use the !important suffix.

You may need to either use a CSS per page plugin so you can call the new CSS on the individual pages or use !important to override.

Simple target tracker shortcode

So an example would be on the Raising Noise Performing Arts Centre Appeal page. Using page-specific style sheet plugin the following CSS code was used to change the colour from blue to orange:

.c100:hover > span {color:orange!important;}
.bar, .fill {border-color:orange!important;}

Note that to change the colour of the text it is the standard colour CSS requirement but the colour of the filled section is border-color!

This is a very simple and straight-forward way to add a stylish circular target bar. You don’t need to do any calculations as this is done by the plugin.

Video tutorial on Simple Circular Tracker plugin

Spread the love

2 reviews for Simple CSS Target Progress Tracker

  1. Gail S.

    beautiful easy to use tracker

  2. Hannah J.

    works well for my course progress

Add a review

Your email address will not be published. Required fields are marked *