16 Single Element Loading Spinners In Pure CSS – SpinBolt

Preview:

Description:

SpinBolt is a collection of 16 minimal, clean, circular, animated loading spinners implemented in single element and CSS/CSS3.

Loading Spinners Included:

1. Circle
2. Dual Circle
3. Path
4. Ripple
5. Seven Circles
6. Clock
7. Puzzle
8. Pushing Shapes
9. Square to circle
10. Rect Spin Fill
11. Dot Slide
12. Circle balance
13. Circle to rhombus
14. Circle and square
15. Half circle spin
16. Sticks

How to use it:

Download import the Loading Spinners as per your needs.

@import 'variables';
@import 'sbl-circ';
@import 'sbl-circ-path';
@import 'sbl-circ-dual';
@import 'sbl-circ-ripple';
@import 'sbl-seven-circles';
@import 'sbl-meter';
@import 'sbl-puzzle';
@import 'sbl-pushing-shapes';
@import 'sbl-square-to-circle';
@import 'sbl-rect-spin-fill';
@import 'sbl-dot-slide';
@import 'sbl-cirle-balance'
@import 'sbl-circle-to-rhombus'
@import 'sbl-cirle-and-square'
@import 'sbl-half-circle-spin'
@import 'sbl-sticks-spin.scss'

Or directly include the complied stylesheet on the page.

<link rel="stylesheet" href="main.css">

Customize the loading spinner in the variables.scss.

$loadercolor: #5a5a5a;
$height: 48px;
$width: 48px;

Changelog:

11/27/2019

• Added sbl-half-circle-spin

10/14/2019

• Added sbl-half-circle-spin

10/13/2019

• Added sbl-circle-and-square spinner

10/07/2019

• Added circle-to-rhombus

09/29/2019

• Added sbl-circle-balance spinner

09/17/2019

• Added sbl-dot-slide spinner

09/05/2019

• Added more spinners