fuel/app/views/components/progress-bar-js.php

```php linenums="1"

var bar_ = new ProgressBar.Line('#container_', { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#209eff', trailColor: '#209eff', trailWidth: 0.1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#999', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null },

autoStyleContainer: false

}, from: {color: '#209eff'}, to: {color: '#209eff'}, step: (state, bar) => { bar.setText(Math.round(bar.value() * 100) + ' %'); } });

var bar_ = new ProgressBar.Circle('#container_', {

    color: '#dedede',
    trailColor: '#eee',
    trailWidth: 1,
    duration: 1400,
    easing: 'bounce',
    strokeWidth: 6,
    from: {color: '#dedede', a:0},
    to: {color: '#dedede', a:1},
    <?php if ($text): ?>
    text: { value: '<?php echo $text; ?>' },
    <?php endif; ?>
  });

var bar_ = new ProgressBar.SemiCircle('#container_', {

    color: '#dedede',
    trailColor: '#eee',
    trailWidth: 1,
    duration: 1400,
    easing: 'bounce',
    strokeWidth: 6,
    from: {color: '#dedede', a:0},
    to: {color: '#dedede', a:1},
    <?php if ($text): ?>
    text: { value: '<?php echo $text; ?>' },
    <?php endif; ?>
  });

bar_.text.style.fontSize = '2.5rem';

var bar_ = new ProgressBar.Path('#container__path', { easing: 'easeInOut', duration: 1400, });

bar_.animate(); // Number from 0.0 to 1.0 ```