An indicating progress bar visually indicates the current level of progress of a task

A progress element can contain a bar visually indicating progress

A progress bar can contain a text value indicating current progress

A progress element can contain a label

A progress bar can show activity

A progress bar can show a success state

Everything worked, your file is all ready.

A progress bar can show a warning state

Your file didn't meet the minimum resolution requirements.

A progress bar can show an error state

A progress bar can be disabled

A progress bar can have its colors inverted

A progress bar can show progress of an element

A progress bar can vary in size

Some small sizes may not be able to fit an inlined label

Can have different colors:

These colors can also be inverted for improved contrast on dark backgrounds

A progress bar can be initialized with metadata

$('#example1').progress();

A progress bar can be initialized with a Javascript settings object

$('#example2').progress({ percent: 22 });

A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

Each call to increment will increase the value by 1, or the value specified as the second parameter

$('#example3') .progress('increment') ;

$('#example3') .progress({ total: 3 }) ;

A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

Each call to increment will increase the value by 1, or the value specified as the second parameter

In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

$('#example4') .progress('increment') ;

You can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

You can use label setting to change progress bar labels between two preset messages. In addition you can customize the messages themselves by specifying the templated text in text. Templated strings will replace three values on render

$('#example5') .progress('increment') ;

$('#example5') .progress({ text: { active : 'Adding {value} of {total} photos', success : '{total} Photos Uploaded!' } }) ;

You can also adjust text labels to help strings appear translated

$('#example6') .progress('increment') ;

$('#example6') .progress({ label: 'ratio', text: { ratio: '{value} de {total}' } }) ;

All the following behaviors can be called using the syntax:

$('.your.element') .progress('behavior name', argumentOne, argumentTwo) ;

Progress bar will automatically poll for the last progress value after completing an animation, so that animation easing continues to work smoothly, even if update events occur much more frequently than UI updates.

Waiting for you to press button

$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; // restart to zero clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;

More here:

Progress | Semantic UI