iOS Style Loading Spinner with Pure CSS – ispinner

Category: CSS & CSS3 , Loading | January 28, 2019
Author: swordray
Views Total: 5,112
Official Page: Go to website
Last Update: January 28, 2019
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:

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