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 .
<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);
//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.
$('#indicatorContainer').radialIndicator({ displayNumber: false });
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 });
You can provide a minimum and maximum value to display the indicator as per required .
$('#indicatorContainer').radialIndicator({ minValue: 1000, maxValue: 100000 });
You can provide a # formatter or a formatter function to format indicator.
$('#indicatorContainer').radialIndicator({ radius: 70, minValue: 10000, maxValue: 10000000, format: '$ ##,##,###' });
This we can easily achieve with normal html css. Here is an example
<div id="indicatorContainerWrap"> <div id="indicatorContainer"></div> <img src="picture/lab_exp.png" id="prgLogo"/> </div>
#indicatorContainerWrap,#indicatorContainer{ display:inline-block; position:relative; } #prgLogo{ position:absolute; width:60px; height:60px; margin-top:-30px; margin-left:-30px; }
$('#indicatorContainer').radialIndicator({value : 90});
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);
<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>
#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; }
//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; } }); }