<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Progress Bar</title>
<script src="jquery.min.js"></script>
<script src="rotater.js"></script>
</head>
<body>
<div id="rotator" style="height:100px;width:100px"></div>
<script>
$(window).load(function () {
$("#rotator").rotator({
starting: 0,
ending: 80,
percentage: true,
color: 'blue',
lineWidth: 7,
timer: 8,
radius: 40,
fontStyle: 'Calibri',
fontSize: '22pt',
fontColor: 'darkblue',
backgroundColor: '#ddd',
callback: function () {
}
});
});
</script>
</body>
</html>
----------------------------------
rotater.js
(function($){
$.fn.rotator = function(options){
var settings = $.extend({
starting: 0,
ending: 100,
percentage: true,
color: 'green',
lineWidth: 7,
timer: 10,
radius: 40,
fontStyle: 'Calibri',
fontSize: '20pt',
fontColor: 'darkblue',
backgroundColor: 'lightgray',
callback: function () {
}
}, options);
this.empty().append("<canvas height ="+this.height() + " width="+this.width()+" id='my-canvas'/ ></canvas>");
var canvas = document.getElementById('my-canvas');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = settings.radius;
var context = canvas.getContext("2d");
if(settings.backgroundColor){
var ctx = canvas.getContext('2d');
ctx.arc(x, y, radius, 0, 2*Math.PI, false);
ctx.strokeStyle = settings.backgroundColor;
ctx.lineWidth = settings.lineWidth;
ctx.stroke()
}
var steps = settings.ending - settings.starting;
var step = settings.starting;
var z = setInterval(function(){
var text;
if(settings.percentage){text = step + "%"}else{text = step}
var start_angle = (1.5 + (step/50))*Math.PI;
var end_angle = (1.5 + (++step/50))*Math.PI;
context.beginPath();
context.arc(x, y, radius, start_angle, end_angle, false);
context.lineWidth = settings.lineWidth;
context.strokeStyle = settings.color;
context.stroke();
context.font = settings.fontSize + ' ' + settings.fontStyle;
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = settings.fontColor;
context.clearRect(x - parseInt(settings.fontSize)*1.5, y - parseInt(settings.fontSize)/2, parseInt(settings.fontSize)*3, parseInt(settings.fontSize));
context.fillText(text, x , y );
if(step >= steps){
window.clearInterval(z);
if(settings.percentage){text = step + "%"}else{text = step}
context.clearRect(x - parseInt(settings.fontSize)*1.5, y - parseInt(settings.fontSize)/2, parseInt(settings.fontSize)*3, parseInt(settings.fontSize));
context.fillText(text, x , y );
if(typeof(settings.callback) == 'function'){
settings.callback.call(this);
}
}
}, settings.timer)
}
}(jQuery));
Hiç yorum yok:
Yorum Gönder