Slim Progress Bar With CSS/CSS3 – progress.css

Preview:

Description:

progress.css is a minimalist CSS library that helps you create an animated slim progress bar to simulate a loading process.

How to use it:

1. Download the package and import the stylesheet progress.css into the document.

<link rel="stylesheet" href="progress.css" />

2. Insert the progress bar into your page.

<div class="progress-css"></div>

3. Override the styles of the progress bar.

:root {
  --progress-duration: 0.8s;
  --progress-height: 2.5px;
  --progress-color: rgb(35,163,255);
  --progress-color-ending: rgba(35,163,255,0.2);
  --progress-shadow: 0 0 3px 2px rgba(0,148,255,0.23);
}