radialIndicator(".indicatorContainer", {}); // second parameter "options" is optional
$('#indicatorContainer').radialIndicator({}); // second parameter "options" is optional
const radialObj = $('#indicatorContainer').data('radialIndicator');
radialObj.animate(60); // now you can use instance to call different method on the radial indicator
const radialObj = radialIndicator('#indicatorContainer');
//getter
const interpolate = radialObj.option('interpolate');
//setter
radialObj.option('interpolate',false);
radialObj.option('radius',60);
radialIndicator.defaults.radius = 80;
radialIndicator.defaults.barColor = "#99CC33";
//getter
const curProgress = radialObj.value();
//setter
radialObj.value(80);
radialObj.animate(80);
Option | Allowed Value | Default | Description |
---|---|---|---|
radius | number | 50 | Define inner radius of indicator. |
barWidth | number | 5 | Define width of the radial bar. |
barBgColor | colour code in hex | #eeeeee | Define background color to radial bar. |
barColor | object of colour range like ({0 : '#FF0000', 50 : '#FFFF00', 100 : '#0066FF',}) or color code in hex | #99CC33 | Define the bar color. If object of color range is provided as value it interpolate color as per color range (if interpolate option is true or else just show the upper limit color) at a specific point. |
roundCorner | boolean | false | If true have rounded corners for circular bars. |
displayNumber | boolean | true | If true show the indicator number. |
duration | number | with percentage 100 without 500 | duration in ms from 0 to 100% |
easing | function | (t) => {return t;} | Function with progress param, returns updated progress. Default linear |
format | # format like (##,###,###) or a formatter function | ## | Define # format or formatter function to format indicator number. |
frameNum | number | 100 for percentage and 500 for others | Number of frames in which indcator circle is divided. |
frameTime | number | 10 | Time taken to go from one frame to another. |
fontColor | hex color code | color code of progress | By default it takes the color code of progress at specific point. If defined it will take the defined color code. |
fontSize | number | Calculated | By default font size is calculated to fit indicator inside circle. Defining this will override the calculated one. |
fontFamily | font family similiar to per css syntax | default | Define font family for indicator number. |
fontWeight | font weight similiar to css syntax | bold | Define font weight for indicator number. |
interaction | boolean | false | If true interaction via touch / mouse allowed. |
interpolate | boolean | true | If true interpolate color according to color range. |
initValue | number | minValue or 0 | Initial indicator value which you want to display on progress bar. |
minValue | number | 0 | Minimum value of indicator. |
maxValue | number | 100 | Maximum value of indicator. |
onChange | function | () => {} | Executed after each iteration. |
percentage | boolean | true | If true show the percentage number. |
precision | number | 0 | Decimal places in indicators displayed value |
textBaseline | string | 'middle' | text baseline of indicator number |
radialIndicator(".indicatorContainer", {
barColor: '#87CEEB',
barWidth: 10,
initValue: 40,
roundCorner : true,
percentage: true
});
radialIndicator(".indicatorContainer", {
displayNumber: false,
initValue: 40
});
radialIndicator(".indicatorContainer", {
barColor: {
0: '#FF0000',
33: '#FFFF00',
66: '#0066FF',
100: '#33CC33'
},
initValue: 70,
percentage: true
});
You can either define the duration from 0 to 100% via properties. Every animate() call then calculates the duration
radialIndicator(".indicatorContainer", {
duration: 5000 // ms
});
Or via animates second optional duration property in milliseconds. To set a duration from current to the target value
radialIndicator.animate(90, 400);
You can pass your own easing function that takes a progress parameter and returns the updated progress. Take a look at this gist
radialIndicator(".indicatorContainer", {
easing: (t) => { return t*t }
});
Or via this npm package
radialIndicator(".indicatorContainer", {
easing: new BezierEasing(x, x, x, x)
});
radialIndicator(".indicatorContainer", {
minValue: 1000,
maxValue: 100000
});
radialIndicator(".indicatorContainer", {
radius: 70,
initValue: 750000,
minValue: 10000,
maxValue: 10000000,
format: '##,###,###'
});
Wrap your content and the indicator inside a wrapper
<pre><code><div id="indicatorContainerWrap">
<div id="indicatorContainer"></div>
<img src="assets/images/lab_exp.png" id="prgLogo"/>
</div></code></pre>
Then add the following css
#indicatorContainerWrap, #indicatorContainer {
display: inline-block;
position: relative;
}
#prgLogo {
position: absolute;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: 30px;
top: 50%;
}
const clock = radialIndicator(".indicatorContainer", {
radius: 60,
barWidth: 5,
barColor: '#FF0000',
minValue: 0,
maxValue: 60,
fontWeight: 'normal',
roundCorner: true,
format: function (value) {
const date = new Date();
return date.getHours() + ':' + date.getMinutes();
}
});
setInterval(() => {
clock.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
const 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);
const 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 () {
const xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
const percentComplete = (e.loaded || e.position) * 100 / e.total;
//Do something with upload progress
console.log(percentComplete);
containerProg.animate(percentComplete);
}
}, false);
return xhr;
}
});
}
Include angular.radialIndicator.js along with radialIndicator.js
<script src="radialIndicator.js"></script>
<script src="angular.radialIndicator.js"></script>
<div ng-app="myApp" ng-controller="demo">
<div data-radial-indicator=""></div>
<div data-radial-indicator="{radius : 80, percentage :true,barColor : '#87CEEB', initValue: 70}"></div>
<div data-radial-indicator="indicatorOption"></div>
</div>
angular.module('myApp', ['ng-sortable','radialIndicator'])
.controller('demo', ['$scope', function ($scope) {
$scope.indicatorOption = {
radius : 80,
percentage :true,
barColor : "#87CEEB",
initValue : 70
};
}]);
You can give the name of modal which you want to bind with indicator in radial-indicator-model attribute, and idicator will watch the model change and update value accordingly.
<div ng-app="myApp" ng-controller="demo">
<div data-radial-indicator="indicatorOption" data-radial-indicator-model="indicatorValue"></div>
</div>
angular.module('myApp', ['ng-sortable','radialIndicator'])
.controller('demo', ['$scope', function ($scope) {
$scope.indicatorOption = {
radius : 80,
percentage :true,
barColor : "#87CEEB"
};
$scope.indicatorValue = 70;
}]);
You can inject radialIndicatorInstance to any controller, directive or service to get instance of radialIndicator and modify it on runtime. In order to get instance of radial indicator you have to define id as shown below.
<div ng-app="myApp" ng-controller="demo">
<div data-radial-indicator="indicatorOption" data-radial-indicator-id="indicator1"></div>
<button data-ng-click="changeValue(30)"></button>
</div>
angular.module('myApp', ['ng-sortable', 'radialIndicator'])
.controller('demo', ['$scope', 'radialIndicatorInstance', function($scope, radialIndicatorInstance) {
$scope.indicatorOption = {
percentage: true,
barColor: "#87CEEB",
initValue : 70
};
$scope.changeValue =
function(val) {
radialIndicatorInstance['indicator1'].animate(30);
}
}]);