jQuery轻量级圆形进度指示器插件 A simple and light weight circular indicator plugin
radialIndicator
radialIndicator is a simple and light weight circular indicator plugin. It supports color range, interpolation, formatting, percentage value and much more, and is easy to configure and update after initialization. And it do work well with jQuery and angular js .
How to use?
Include jquery [optional] and radialIndicator.js.
<script src="radialIndicator.js"></script>
$('#indicatorContainer').radialIndicator();
In this first argument is configuration parameters [Optional], Lets see a example with configuration.
$('#indicatorContainer').radialIndicator({
barColor: '#87CEEB',
barWidth: 10,
initValue: 40,
roundCorner : true,
percentage: true
});
Getting instance of radial Progress
var radialObj = $('#indicatorContainer').data('radialIndicator');
//now you can use instance to call different method on the radial progress.
//like
radialObj.animate(60);
What if you don't use jQuery
Radial Progress work standalone too.
//Intialiazation
var radialObj = radialIndicator('#indicatorContainer', {
barColor : '#87CEEB',
barWidth : 10,
initValue : 40
});
//Using Instance
radialObj.animate(60);
In this way first argument is a selector string or dom node or node list (Even you pass a node list it takes the first node only). Function returns a instance so you can use it call different methods same as shown in jquery example.
You can use any one of the following way as per your convinient.
A radialIndicator without number idicator
$('#indicatorContainer').radialIndicator({
displayNumber: false
});
Providing a color range
You can provide a color range for different points, and if interpolate option is true radialIndicator will interpolate color between two points else it will take the upper limit color of the points.
$('#indicatorContainer').radialIndicator({
barColor: {
0: '#FF0000',
33: '#FFFF00',
66: '#0066FF',
100: '#33CC33'
},
percentage: true
});
Providing minimum value and maximum value
You can provide a minimum and maximum value to display the indicator as per required .
$('#indicatorContainer').radialIndicator({
minValue: 1000,
maxValue: 100000
});
Formating a indicator
You can provide a # formatter or a formatter function to format indicator.
$('#indicatorContainer').radialIndicator({
radius: 70,
minValue: 10000,
maxValue: 10000000,
format: '$ ##,##,###'
});
Having logo / different element inside the radial inside radialIndicator
This we can easily achieve with normal html css. Here is an example
HTML
<div id="indicatorContainerWrap">
<div id="indicatorContainer"></div>
<img src="picture/lab_exp.png" id="prgLogo"/>
</div>
CSS
#indicatorContainerWrap,#indicatorContainer{
display:inline-block;
position:relative;
}
#prgLogo{
position:absolute;
width:60px;
height:60px;
margin-top:-30px;
margin-left:-30px;
}
JS
$('#indicatorContainer').radialIndicator({value : 90});
A clock example
A simple clock using radial indicator.
var radialObj = radialIndicator('#indicatorContainer', {
radius: 60,
barWidth: 5,
barColor: '#FF0000',
minValue: 0,
maxValue: 60,
fontWeight: 'normal',
roundCorner: true,
format: function (value) {
var date = new Date();
return date.getHours() + ':' + date.getMinutes();
}
});
setInterval(function () {
radialObj.value(new Date().getSeconds() + 1);
}, 1000);
A file upload example
HTML
<div id="indicatorContainerWrap">
<div class="rad-prg" id="indicatorContainer"></div>
<div class="rad-cntnt">Click / Drop file to select.</div>
<input type="file" id="prgFileSelector" />
</div>
CSS
#indicatorContainerWrap{
position: relative;
display: inline-block;
}
.rad-cntnt{
position: absolute;
display: table;
vertical-align: middle;
text-align: center;
width: 100%;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size:20px;
line-height: 24px;
}
#prgFileSelector{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
top:0;
left:0;
z-index: 10;
}
JS
//file upload example
var container = $('#indicatorContainerWrap'),
msgHolder = container.find('.rad-cntnt'),
containerProg = container.radialIndicator({
radius: 100,
percentage: true,
displayNumber: false
}).data('radialIndicator');
container.on({
'dragenter': function (e) {
msgHolder.html("Drop here");
},
'dragleave': function (e) {
msgHolder.html("Click / Drop file to select.");
},
'drop': function (e) {
e.preventDefault();
handleFileUpload(e.originalEvent.dataTransfer.files);
}
});
$('#prgFileSelector').on('change', function () {
handleFileUpload(this.files);
});
function handleFileUpload(files) {
msgHolder.hide();
containerProg.option('displayNumber', true);
var file = files[0],
fd = new FormData();
fd.append('file', file);
$.ajax({
url: 'service/upload.php',
type: 'POST',
data: fd,
processData: false,
contentType: false,
success: function () {
containerProg.option('displayNumber', false);
msgHolder.show().html('File upload done.');
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded || e.position) * 100 / e.total;
//Do something with upload progress
console.log(percentComplete);
containerProg.animate(percentComplete);
}
}, false);
return xhr;
}
});
}