FullCircleProgress Plugin requires jQuery library

Set up by importing fcp.js or fcp.min.js to your page

<script src="path/fcp.min.js"></script>

Initialize by fullCircleProgress(parameters). Example:

$('myDiv').fullCircleProgress({
    side: 100,
    levels: 5,
    level: 3,
    alternativeColor: '#ff4586'
})

• side: the diameter of the circle in pixels
• levels: the total number of division in the circle. (Must be > 1)
• level: the current level.

• colors: array contaning colors of levels. levels[i] will be filled by colors[i]
• alternativeColor: this color is used when colors[i] doesn't exist

if you initialized colors array but not enough to fill all levels and you didn't initialize an alternativeColor then colors[0] will take the place in the levels without color. if neither colors nor alternativeColor are initialized then the levels will be filled in black

• achievedStyle: object of css style as you do with jQuery .css(). This style will be affected to achieved levels ( those <= level). By default:

{"opacity": "1"}

• leftStyle: same as achievedStyle but for levels > level. By default:

{"opacity": "0.3"}

• backgroundImage: path to image. This image will appear in background (Must be a square)
• onClick: function executed on click on any level it gives the level clicked. Example:

function(level){alert(level)}

• onHover: array of two functions, to be executed when the mouse pointer enters and leaves the level. Example:

onHover: [
    function(level){
        alert('entred in level '+level)
    },function(level){
        alert('left level '+level)
    }
]

• hoverStyle: css style object (same as achievedStyle & leftStyle), affected to level on mouse enter or leave.By default (only if onClick or onHover are initialized):

{"opacity": "0.8"}

• linked: boolean. If set to true hoverStyle will affect all levels <= hovered level, else it will affect only hovered level. By default: true