Progress bars

Documentation for ProgressBar javascript module.

Files

app/scripts/modules/progressBar.js

Progress Bar

Javascript dependency

ProgressBar component requires ProgressBar.js plugin.

Default initialization

Initialization is shown on example below. Constructor returns array of initialized objects.

Basic initialization is done in main.js file for all progress bars with class .js-progressbar.

Note

You can specify type, progress and label via coressponding data attributes on DOM node.

Example:

40 %

40 seconds left

Code:

<script>
  var myProgressBars = new myApp.ProgressBar();
  /*
    console.log(myProgressBars);
    [Object, Object, ...]
   */
</script>

Custom initialization

In case it's needed to create progressbar with more customized behavior, initialization can be done manualy.

Code:

<div id="my-progress-bar"></div>
<script>
  // custom selector
  var myProgressBar = myApp.ProgressBar('#my-progress-bar', {
    type: 'circle',
    progress: 0.4,
    label: '40 <span class="text-big">%</span>'
  });
</script>


<script>
  // custom selector
  var myProgressBar = myApp.ProgressBar('#my-progress-bar', {
    type: 'line',
    progress: 0.4,
    svgStyle = {width: '100%', height: '100%'};
    text: {
            value: '40 seconds left',
            className: `progress-line_label text-small pull-right`,
            style: {
             color: '#afafaf',
           },
    },
  });
</script>

Methods

All ProgressBar.js Shape methods are available. Example usage is shown below on example.

Code:

<div id="my-progress-bar"></div>
<script>
  // custom selector
  var myProgressBar = myApp.ProgressBar('#my-progress-bar', {
    type: 'circle',
    progress: 0.4,
    label: '40 <span class="text-big">%</span>'
  });

  myProgressBar.set(0.6);
  myProgressBar.setText('60 <span class="text-big">%</span>');
  myProgressBar.updateProgress(progressBarInstance, '40 seconds left', 0.4);
  myProgressBar.destroy();
</script>