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

Preview:

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