Progress Bar

• Introduction
• Basic Example
• Real World Example
• Vertical Example

Allows users to view loading progress in real time.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Progress Bar module.

YUI().use(
  'aui-progressbar',
  function(Y) {
    // code goes here
  }
);

---

Using Progress Bar

Create a HTML element:

<div id="myProgressBar"></div>

Now create a new instance of Progress Bar component, then tell to boundingBox where it's going to be attached. We'll set the initial value of Progress Bar to 70. Next, let's render it.

YUI().use(
  'aui-progressbar',
  function(Y) {
    new Y.ProgressBar(
      {
        boundingBox: '#myProgressBar',
        value: 70,
        width: 700
      }
    ).render();
  }
);

---

Configuring Progress Bar

There are some other options that you can pass to your Progress Bar instance.

You can set a label which is changed when the complete event fires.

YUI().use(
  'aui-progressbar',
  function(Y) {
    new Y.ProgressBar(
      {
        boundingBox: '#myProgressBar',
        label: '40%',
        on: {
          complete: function(e) {
            this.set('label', 'Complete!');
          }
        },
        value: 40,
        width: 700
      }
    ).render();
  }
);

Also you can define a vertical Progress Bar, to do that just set orientation to vertical.

YUI().use(
  'aui-progressbar',
  function(Y) {
    new Y.ProgressBar(
      {
        boundingBox: '#myProgressBar',
        height: 200,
        label: '60%',
        orientation: 'vertical',
        value: 60,
        width: 30
      }
    ).render();
  }
);