Progress Bar

Use this collection of interface elements to repurpose and help build applications. The purpose is to work as efficiently as possible to allow you to focus on solving challenges. If there is a component you need and isn’t listed, please submit your request to Web. The ticket will be reviewed for design/implementation.

Progress Bar

How To:

Selection dropdowns can be initialized directly on a select or with the matching HTML and a hidden input. To initalize a dropdown use: $('.ui.dropdown').dropdown();

The percentage of the progress bar can be initialized with metadata or with javascipt. View examples.

Basic Bar

A progress element can contain a bar visually indicating progress

progress

Code Example


Label Percentage

Progress bar with label and percent. You may obmit the label if not needed, and you may also omit the "progress" div class within the bar if you do not want the percentage to show.

35% Funded

Code Example


35% Funded

Usage & Settings

The percentage of the progress bar can be initialized with metadata or with javascipt.

For information on behaviors that are accessible with Javascript using the syntax: See Usage Information

To view information on settings and callbacks: See Setting Information.