Animated Wave Progress Spinner In Pure CSS – progress-waves.css

Category: CSS & CSS3 , Loading | April 22, 2021
Author:madmurphy
Views Total:358 views
Official Page:Go to website
Last Update:April 22, 2021
License:MIT

Preview:

Animated Wave Progress Spinner In Pure CSS – progress-waves.css

Description:

A CSS library to create animated, wave-style loading spinners that can be used to represent the ‘in-progress’ state.

How to use it:

1. Import the progress-waves.css stylesheet.

// with variables
<link rel="stylesheet" href="progress-waves.css" />

// without variables
<link rel="stylesheet" href="progress-waves.css" />

2. Create a default wave loading spinner by adding the CSS class in-progress to the target element.

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

3. Customize the wave loading spinner by overriding the default variables.

.in-progress {
  --wave-diameter: 220px;
  --wave-thickness: 9px;
  --wave-duration: 3s;
}

You Might Be Interested In:


Leave a Reply