iOS Style Loading Spinner with Pure CSS – ispinner

Preview:

Description:

ispinner is a lightweight CSS library that helps you display an iOS style animated loading indicator while data in specific area is loading.

How to use it:

Link the ispinner.css into your HTML document by copying the following code into your site.

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

Create an animated grey loading spinner.

<div class="ispinner gray animating">
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
</div>

Create an animated white loading spinner in large size.

<div class="ispinner white large animating">
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
  <div class="ispinner-blade"></div>
</div>

Changelog:

v3.1.1 (02/05/2022)

• Update sass

v3.0.0 (12/04/2020)

• Update iOS 14 style.

v2.0.0 (10/05/2019)

• Support iOS 13 `medium` and `large` styles

v1.2.2 (01/28/2019)

• Add will-change for better animation performance.

08/05/2018

• Update