The jQuery SVG progress plug-in

The jQuery-svg-progress is a light-weight (5Kb) progress indicator plug-in with a variety of shapes that allow you using for infographics or some other purpose.

Following shapes can be given as values:

  • Rectangle
  • Pentagon
  • Circle
  • Hexagon
  • Rhomb
  • Triangle
  • The SVG path like a heart, star, leaf etc.

The demos will give you a better idea of how progress is displayed in these shapes:

Demo1 Demo2 Demo3 Demo4

Developer’s page Download plug-in

Install with npm

You may install the plug-in with npm as follows:

npm i jquery-svg-progress

Or download it from the GitHub website by the above-provided link.

Include dependency files

Include the jQuery library and plug-in’s jQuery-svg-progress.js file. You also need to include the waypoints.min.js (comes with the downloaded package).

<script src=””></script>

<script src=”js/jQuery-svg-progress/waypoints.min.js”></script>

<script src=”js/jQuery-svg-progress/jQuery-svg-progress.js”></script>

In the <head> section:

<link rel=”stylesheet” href=”css//jQuery-svg-progress/main.css”>

See the demos below with markup and complete code.

A demo of loading Hexagon progress

In this demo, a hexagon SVG shape is used for illustration. You may set the progress maximum value by data-progress-value attribute. In the demo, three hexagon shapes are used; first for 100%, second for 85% and third for 62%.

After opening the demo page below, press the “start” button. After loading is done, press the reverse button to get it back:

See online demo and code

The markup used in the demo:

The jQuery code:

Get the complete code from the demo page.

An example of rectangle shape progress

In this example, the rectangle shapes are used for demonstration:

See online demo and code

For creating the rectangle, use the “rect” value for figure option in the jQuery code:

A demo of triangle shape

Just like above examples, start the progress by pressing the button and you may reverse this as well. For triangle shape SVG progress, use the “triangle” value:

See online demo and code

The jQuery code:

The markup:

Grab the complete code from the demo page.

A demo of drawing different shapes by SVG path

In this demo, different shapes are drawn by using the SVG path. These include a heart, leaf and star shapes. You may provide different path/values for different shapes as per the need of your project.:

See online demo and code

You can see the demo and complete code from the demo page.

For more shapes and learning about available options, you may visit the developer’s page.