This time I will share jQuery Plugin and tutorial about Animated Circle Diagram Plugin with jQuery – smartCycle.js, hope it will help you in programming stack.
smartCycle.js is a simple jQuery plugin used to render an animated, customizable circle diagram for presenting ‘x’ step cyclical progress.
How to use it:
1. Load the latest version of jQuery library and the jQuery smartCycle.js plugin in the html document.
1 |
<script src="//code.jquery.com/jquery-latest.min.js"></script> |
2 |
<script src="smartCycle.min.js"></script> |
2. Add diagram objects into your webpage like this.
01 |
<div class="container"> |
03 |
<a class="sc_object">A</a> |
04 |
<a class="sc_object">B</a> |
05 |
<a class="sc_object">C</a> |
06 |
<a class="sc_object">D</a> |
07 |
<a class="sc_object">E</a> |
08 |
<a class="sc_object">F</a> |
09 |
<a class="sc_center">center</a> |
3. Initialize the plugin to draw an animated circle diagram with arrows on the webpage.
1 |
$(".demo").smartCycle({ |
4. All configuration options.
01 |
container_width: "420px", |
02 |
container_height: "420px", |
Changelog:
2015-11-29
This awesome jQuery plugin is developed by mhvdeveloper. For more Advanced Usages, please check the demo page or visit the official website.
