16 Single Element Loading Spinners In Pure CSS – SpinBolt


Author: mdjunaidalam5
Views Total: 2,181 views
Official Page: Go to website
Last Update: November 27, 2019
License: MIT

Preview:

16 Single Element Loading Spinners In Pure CSS – SpinBolt

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

09/29/2019

  • Added sbl-circle-balance spinner

09/17/2019

  • Added sbl-dot-slide spinner

09/05/2019

See also  Automatic Image Slider In Pure CSS / CSS3

Leave a Reply

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