4 Animated CSS Loading Spinners – kSpinners.css

The kSpinners.css library provides 4 cool animated loading spinners for modern web design:

• Pulse
• Signal
• Spin
• Swirl

See also:

• 10 Best Loading Spinner & Indicator jQuery Plugins
• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries

How to use it:

Installation & download.

# NPM
$ npm install @knekk/spinners --save

Include the kSpinners.css on the webpage.

<!-- All In One -->
<link rel="stylesheet" href="dist/kSpinners.css">
<!-- Pulse -->
<link rel="stylesheet" href="dist/kSpinnerPulse.css">
<!-- Signal -->
<link rel="stylesheet" href="dist/kSpinnerSignal.css">
<!-- Spin -->
<link rel="stylesheet" href="dist/kSpinnerSpin.css">
<!-- Swirl -->
<link rel="stylesheet" href="dist/kSpinnerSwirl.css">

Create the loading spinners:

<i class="k-spinner--spin"></i>
<i class="k-spinner--pulse"></i>
<i class="k-spinner--swirl"></i>
<i class="k-spinner--signal"></i>