Progress

Progress indicators, loading spinners, and skeleton placeholder loaders. Part of the @thenewcss/progress addon package.

Installation

npm install @thenewcss/progress

Progress Bar

Set the width via inline style to indicate progress. Color variants available for contextual meaning.

Preview

25%

50%

75%

100%

<div class="progress">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>

Color Variants

Preview

Success

Warning

Danger

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%">Success</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 60%">Warning</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 80%">Danger</div>
</div>

Striped & Animated

Add .progress-bar-striped for diagonal stripes and .progress-bar-animated for moving stripes.

Preview

Striped

Animated

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 50%">Striped</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">Animated</div>
</div>

Spinners

Two spinner styles for loading states. Use .spinner-border for a spinning border or .spinner-grow for a pulsing dot.

Preview

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>
<!-- Small variants -->
<div class="spinner-border spinner-border-sm" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>

Placeholders

Skeleton loading placeholders with glow and wave animations for content that hasn't loaded yet.

Preview

<p class="placeholder-glow">
  <span class="placeholder" style="width: 100%"></span>
  <span class="placeholder" style="width: 75%"></span>
</p>
<p class="placeholder-wave">
  <span class="placeholder" style="width: 100%"></span>
  <span class="placeholder" style="width: 66%"></span>
</p>

Class Reference

Progress Bar

Class	Description
`.progress`	Container with gray background and rounded corners.
`.progress-bar`	Fill bar. Set width via inline style. Blue by default.
`.progress-bar-striped`	Diagonal stripe pattern via background gradient.
`.progress-bar-animated`	Animates the stripes with a moving effect.
`.progress-bar-success`	Green progress bar.
`.progress-bar-warning`	Yellow progress bar.
`.progress-bar-danger`	Red progress bar.

Spinners

Class	Description
`.spinner-border`	Spinning border circle. 2rem size, uses currentColor.
`.spinner-grow`	Pulsing grow animation. 2rem size, uses currentColor.
`.spinner-border-sm`	Small spinner variant. 1rem size.
`.spinner-grow-sm`	Small grow variant. 1rem size.

Placeholders

Class	Description
`.placeholder`	Inline-block skeleton element with currentColor background.
`.placeholder-glow`	Container that applies a pulsing glow animation to placeholders.
`.placeholder-wave`	Container that applies a shimmer wave animation to placeholders.