Need understanding of how to implement somebody else's jquery

Question

This is the code I want.. http://p.ar2oor.pl/cprogress/ it is exactly what i need for my project. The download file has some code but no implementation instructions. Having NO jquery xp I don't know how how to implement it. I used the html from the page source and linked jquery through google cdn. Here's the fiddle.

http://jsfiddle.net/ebenhafkamp/abrdz924/

<div class="radial">
    <div class="jCProgress" style="opacity: 1;"></div>
    <div class="percent" style="display: block;">70</div>
    <canvas width="105" height="105">
</div>

It's basically a compilation of code from the site, the js is purely what is written in the download link and css is the only thing I used from documentation. I can't see how it could produce what it is supposed to. Can someone shine some light on this for me..

Answer 1

Include the file at this link: http://p.ar2oor.pl/cprogress/jCProgress-1.0.3.js Then do as implementation instructions suggests:

HTML

<div id="my-cprogress"></div>

Javascript

$('#my-cprogress').cprogress({
           percent: 10, // starting position
           img1: 'v1.png', // background
           img2: 'v2.png', // foreground
           speed: 200, // speed (timeout)
           PIStep : 0.05, // every step foreground area is bigger about this val
           limit: 20, // end value
           loop : false, //if true, no matter if limit is set, progressbar will be running
           showPercent : true, //show hide percent
           onInit: function(){console.log('onInit');},
           onProgress: function(p){console.log('onProgress',p);}, //p=current percent
           onComplete: function(p){console.log('onComplete',p);}
      });

Here's fiddle: http://jsfiddle.net/abrdz924/1/

NOTE: remember that you have to provide two existing images for the background ('img1' and 'img2'). In the fiddle you won't see them as the URIs I've specified is not valid.