<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ProgressBar.js - Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> function reload(){ location.href=location.href } setInterval('reload()',14000) </script> </head> <body> <div id="container"></div> <!-- These are probably out dated so you might want to use newest versions --> <script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <script src="bar.js"></script> </body> </html>
// [email protected] version is used // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ var bar = new ProgressBar.Line('#container', { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#2af560', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#9999', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#FFEA82'}, to: {color: '#2af560'}, step: (state, bar) => { bar.setText("100/386 obtained"); } }); setInterval(drawBar, 1000) function drawBar() { bar.animate(1.0); // Number from 0.0 to 1.0 }
setInterval(drawBar, 1000) to something bigger, that will do it once a second right now
step: (state, bar) => { bar.setText("100/386 obtained"); } }); setInterval(drawBar, 1000) function drawBar() { bar.animate(0.5); // Number from 0.0 to 1.0 }
strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#2af560', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'},
// [email protected] version is used // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ var bar = new ProgressBar.Line('#container', { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#2af560', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#9999', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#FFEA82'}, to: {color: '#2af560'}, step: (state, bar) => { bar.setText("100/386 obtained"); } }); bar.animate(1.0);
setInterval('reload()',14000)
setInterval('reload()',600000)
bar.animate(0.1); to bar.animate(0.2); (edited)
bar.setText("100/386 obtained"); is just set that doesn't change, and the bar is set by bar.animate(0.2); where it's a number between 0.1 and 1 (1 being full), so if I make another bit where you just enter a number out of 383 and it will fill the ratio of the bar up by that %? (edited)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ProgressBar.js - Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> function reload(){ location.href=location.href } setInterval('reload()',30000) </script> </head> <body> <div id="container"></div> <!-- These are probably out dated so you might want to use newest versions --> <script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> <script src="bar.js"></script> </body> </html>
// [email protected] version is used // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ var obtained = 100; //set this var ratio = obtained / 383; var bar = new ProgressBar.Line('#container', { strokeWidth: 2, easing: 'linear', duration: 0, color: '#2af560', trailColor: '#eee', trailWidth: 2, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#9999', position: 'absolute', right: '15px', top: '15px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#FFEA82'}, to: {color: '#2af560'}, step: (state, bar) => { bar.setText(obtained + "/383 obtained"); } }); bar.animate(ratio);
var obtained = 100; //set this to set the caught amount
color: '#ff3300', I'm not sure if normal css styling works with it for the font though, you might need to experiment with that a little