I am trying to make a progressbar work that I have found and that is exactly what I need. The progressbar that I try to use is from this web , for more exact this . But for more quwe I try, I can not make it work, I do not see anything of the code that I insert, and I need 3 of these ....... I have all day with this and there is no way. Can somebody help me? Thanks.
You have not shared the code, but I guess you're missing something to make it work.
First of all you should call the progressbar.js file that you should download from here and upload it to your server, where you will have to make the call to the file.
Then you can declare the container <div> where your #container is. Then we declare the <style> that we want, in this case we will use the one provided by the demo.
And finally we will declare the <script> that runs through the circle.
<!-- Llamamos a la librería JS -->
<script src="progressbar.js"></script>
<!-- Declaramos el contenedor -->
<div id="container"></div>
<!-- Estilos -->
<style>
#container {
margin: 20px;
width: 200px;
height: 200px;
position: relative;
}
</style>
<!-- Script de progreso -->
<script>
// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
</script>