Overview

This diverse and dynamic “CountUp component” will be sure to give your site an edge over competitors. Use it to demonstrate figures and values to the customers and users viewing your website. Whats more – you can have as many of these sexy looking components on a page as you want.

“Particles” will animate themselves, one after another, into a position around a semi circle whilst the percentage value you specify will “count up” from 0 to it’s final value. The particles change color from red (low number) to green (high number) and the text also changes to the same color as the currently animating particle!

The value can visually demonstrate anything as a percentage of 100. 

It’s extremely easy to get going, just place the HTML5 Canvas element on your page where you want it and link in the attached JS file and CSS file just once.

Features

Visually demonstrates a value of 100% to the end user much better than boring plain text.

Requirements

None

Instructions

Installation

Simple add the HTML5 canvas code – <div class="pcu"><canvas id="pcu-canvas" width="300" height="150" data-pcu-rating="100" /></div> to you’re page and make sure the css and js files are linked in to the page. * Change the value in the data-cpu-rating attribute to what you want (as a percentage of 100)*

You can adjust the size of this component by simply chaging the width property on the canvas element to your desired width. The height attribute is irrelevant here and can be ignored as it is set in JS.

Advanced

* Needs some developer knowledge *
The JS file included, contains an onload function attached to window. All this does is call a function called pcuInit(), if needed, you can strip this out of the JS file and add the pcuInit() call into your own onload function so it can be called and ran at a specific point.

HTML5 Canvas elements are not responsive by nature, i have chosen to assign a width of 300px by default as it will work for most mobile devices perfectly. In order to have different sizes for mobile and desktop, you will need to write some custom JavaScript which changes the width attribute on the canvas element on page load before the pcuInit() function is called.