Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Progress Bar

Compact progress bar.


Structure

<progress max="100" value="40" class="zust-progress"></progress>


Colors

It supports all theme colors.

<progress max="100" value="55" class="zust-progress zust-success"></progress>
<progress max="100" value="25" class="zust-progress zust-warning"></progress>
<progress max="100" value="70" class="zust-progress zust-error"></progress>
<progress max="100" value="85" class="zust-progress zust-link"></progress>


Sizes

There are five size that you can use with progress bars.

<progress class="zust-progress zust-line" max="100" value="5"></progress>
<progress class="zust-progress zust-thin" max="100" value="15"></progress>
<progress class="zust-progress zust-small" max="100" value="35"></progress>
<progress class="zust-progress" max="100" value="55"></progress>
<progress class="zust-progress zust-large" max="100" value="75"></progress>
<progress class="zust-progress zust-xlarge" max="100" value="95"></progress>

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs

Zusty Pages are Now Available offline.
New or Updated content available.  Refreshing...

Choose Editor