iOS Style Loading Spinner with Pure CSS – ispinner

Category: CSS & CSS3 , Loading | February 5, 2022
Author:swordray
Views Total:4,645 views
Official Page:Go to website
Last Update:February 5, 2022
License:MIT

Preview:

iOS Style Loading Spinner with Pure CSS – ispinner

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

You Might Be Interested In:


Leave a Reply