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