jQuery To Create Circle Progress Bar With Percentage

circle-progress is a customizable jQuery plugin to visualize your digital data in an animated circular progress bar with or without percentage value.

Features:

  • Simple and easy to use.
  • Custom sizes and angles, fill colors and images.
  • jQuery animate() based animation.
  • Without any CSS rules.
  • Reverse drawing mode

How to make use of it:

Install

bower install jquery-circle-progress

npm install jquery-circle-progress

Usage

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

<div id="circle"></div>

<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });
</script>

jquery plugin for circular progress bar, jquery-circle-progress plugin/github


See Demo And Download

Official Website(thatsus): Click Here

This superior jQuery/javascript plugin is developed by thatsus. For extra advanced usage, please go to the official website.

Share