Slim Progress Bar With CSS/CSS3 – progress.css

Category: CSS & CSS3 , Loading | January 7, 2021
Views Total:1,053 views
Official Page:Go to website
Last Update:January 7, 2021


Slim Progress Bar With CSS/CSS3 – progress.css


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);

You Might Be Interested In:

Leave a Reply