Slim Progress Bar With CSS/CSS3 – progress.css

Author: talaing
Views Total: 651 views
Official Page: Go to website
Last Update: January 7, 2021
License: MIT


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

See also  Background Image Slider With Caption Bar Using Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *