15 Single Element Loading Spinners In Pure CSS – SpinBolt

Category: CSS & CSS3 , Loading | October 14, 2019
Author: mdjunaidalam5
Views Total: 144
Official Page: Go to website
Last Update: October 14, 2019
License: MIT

Preview:

15 Single Element Loading Spinners In Pure CSS – SpinBolt

Description:

SpinBolt is a collection of 15 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

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'

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:

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

You Might Be Interested In:


Leave a Reply