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


Author: madmurphy
Views Total: 629 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;
}

See also  Silky Smooth Background Image Silder With CSS3 Keyframes

Leave a Reply

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