168 lines
4.6 KiB
JavaScript
168 lines
4.6 KiB
JavaScript
const SetupProgressBar = () =>{
|
|
//var bar = new ProgressBar.Path('#path-2', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
//});
|
|
//
|
|
//bar.set(0);
|
|
//bar.animate(0.33)
|
|
|
|
// var bar4 = new ProgressBar.Path('#healthText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
// });
|
|
// bar4.set(0)
|
|
// bar4.animate(0.7)
|
|
//
|
|
// var bar5 = new ProgressBar.Path('#waterText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
// });
|
|
// bar5.set(0)
|
|
// bar5.animate(0.7)
|
|
//
|
|
// var bar6 = new ProgressBar.Path('#armorText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
// });
|
|
// bar6.set(0)
|
|
// bar6.animate(0.7)
|
|
// var bar7 = new ProgressBar.Path('#hungerText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
// });
|
|
// bar7.set(0)
|
|
// bar7.animate(0.7)
|
|
// var bar8 = new ProgressBar.Path('#staminaText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
//});
|
|
//bar8.set(0)
|
|
//bar8.animate(0.7)
|
|
// var bar9 = new ProgressBar.Path('#stressText', {
|
|
// easing: 'easeInOut',
|
|
// duration: 1400
|
|
//});
|
|
//bar9.set(0)
|
|
//bar9.animate(0.7)
|
|
}
|
|
|
|
/*! SVG Pie Progress Indicator | Ryan Detert | MIT License */
|
|
/*! based on SVG Pie Timer 0.9.1 | Anders Grimsrud, grint.no | github.com/agrimsrud/svgPieTimer.js */
|
|
|
|
// Date.now fix by Ari Fuchs, afuchs.tumblr.com/post/23550124774/date-now-in-ie8
|
|
Date.now = Date.now || function() { return +new Date };
|
|
|
|
function svgPieProgress(props){
|
|
|
|
'use strict';
|
|
|
|
var element = props.element,
|
|
duration = props.duration || 1000,
|
|
endTime = 0,
|
|
totalDuration = 0,
|
|
lastTotalProgress, totalProgress, endProgress,
|
|
currentAngle = 0;
|
|
|
|
if(!element) throw "SVG Pie Progress: Error - element required"
|
|
|
|
this.progress = (props.progress) ? props.progress : 0.0;
|
|
|
|
this.updateProgress = function(progress){
|
|
|
|
// We need to keep track of the current angle in case the progress gets updated
|
|
// before the previous progress animation finishes
|
|
lastTotalProgress = currentAngle / 360;
|
|
var delta = progress - lastTotalProgress;
|
|
|
|
// this is how much extra we have to go for this progress update
|
|
// progress will contain the new value
|
|
// this.progress will contain the saved value from last time
|
|
var segmentDuration = Math.floor(duration * (progress - this.progress));
|
|
|
|
// this is how much we still have left from the previous time (if necessary)
|
|
var timeLeft = Math.floor(duration * ( this.progress - lastTotalProgress ));
|
|
totalDuration = segmentDuration + timeLeft;
|
|
|
|
endTime = Date.now() + totalDuration;
|
|
|
|
this.progress = endProgress = progress;
|
|
frame();
|
|
}
|
|
|
|
function draw(element, angle) {
|
|
var count = element.length;
|
|
|
|
var rad = (angle * Math.PI / 180),
|
|
x = Math.sin(rad) * 125,
|
|
y = Math.cos(rad) * -125,
|
|
mid = (angle > 180) ? 1 : 0,
|
|
shape = 'M 0 0 v -125 A 125 125 1 '
|
|
+ mid + ' 1 '
|
|
+ x + ' '
|
|
+ y + ' z';
|
|
|
|
// If array of elements, draw each one
|
|
|
|
if(element instanceof Array)
|
|
while(count--)
|
|
element[count].setAttribute('d', shape)
|
|
else
|
|
element.setAttribute('d', shape)
|
|
}
|
|
|
|
|
|
function frame() {
|
|
|
|
var currentTime = Date.now(),
|
|
remaining = endTime - currentTime;
|
|
|
|
var currentSegmentProgress = ( 1 - remaining / totalDuration );
|
|
var totalProgress = lastTotalProgress + currentSegmentProgress;
|
|
var newAngle = 360 * totalProgress;
|
|
|
|
// make sure no small jump backwards due to rounding, etc
|
|
if ( newAngle > currentAngle )
|
|
currentAngle = newAngle;
|
|
|
|
|
|
if ( totalProgress >= endProgress ) {
|
|
|
|
currentAngle = 360 * endProgress;
|
|
lastTotalProgress = endProgress;
|
|
|
|
// 360 degrees is the same as 0 degress so it won't look finished if we don't
|
|
// set it back a little
|
|
currentAngle = (endProgress >= 0.999) ? 359.999 : currentAngle;
|
|
|
|
draw(element, currentAngle);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
draw(element, currentAngle);
|
|
|
|
requestAnimationFrame(frame);
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
var progress = {}
|
|
|
|
function init(loaderEl, border, val){
|
|
var loader = document.getElementById(loaderEl),
|
|
border = document.getElementById(border);
|
|
if(progress[loaderEl] == undefined){
|
|
progress[loaderEl] = new svgPieProgress({
|
|
element: [loader, border],
|
|
duration: 400 // total time it would take without stopping from 0-100%
|
|
});
|
|
}
|
|
|
|
progress[loaderEl].updateProgress(val+.0)
|
|
}
|
|
|