<ui-progress class="inverted indicating" value="10" total="20">
    <div class="label">
        <span v-if="isActive">Adding {{value}} of {{total}} photos</span>
        <span v-if="!isActive">All photos were uploaded.</span>
Adding {{value}} of {{total}} photosAll photos were uploaded.


increment by


value {Number} Default: 0

The starting value of the progress.

total {Number} Default: 100

The maximum value that the progress can run up to. Default is 100, ie 100%

class {String}

Use this attribute to specify different variations by adding one or more classes from here: variations


<ui-progress class="green" value="20"></ui-progress>


<ui-progress class="attached blue" value="50"></ui-progress>
A segment with the progress bar attached to the top.


A ui-progress instance emits a 'completed' event, which you can listen to in the following way:

var transcoding = new Progress({ ... });
transcoding.$on('completed', function(){
   // Set the 'status' depending on other logic
   transcoding.status = 'error';

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.