Progress
A progress bar shows the progression of a task.

Types

Standard

A standard progress bar.

Indicating

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

Auto Success

A progress bar can automatically trigger the success state when progress completes.

Content

Bar

A progress element can contain a bar visually indicating progress.

Progress

A progress bar can contain a text value indicating current progress.

Label

A progress element can contain a label.

A progress label can also be defined via props.

A progress element display progress as a percent.

A progress element display progress as a ratio.

A progress element display progress as a value.

A progress element display progress as a value, with the width determined as a % of total.

States

Semantic UI states success, warning, and error are only retained at 100% completion.

Active

A progress bar can show activity.

Success

A progress bar can show a success state.

Warning

A progress bar can show a warning state.

Error

A progress bar can show an error state.

Disabled

A progress bar can be disabled.

Variations

Inverted

A progress bar can have its colors inverted.

Attached

A progress bar can show progress of an element.

Size

A progress bar can vary in size.

Color

A progress bar can have different colors.

Inverted Color

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

This is the bottom