File Size: 235KB
Total Views: 2727
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
Text-spinners is very simple to use and pure css based inline loading. No extra coding is required to implement this, just change the font size as per your requirements.
Features:
- It can be install with
NPM - Very easy to implement.
- Built with pure CSS.
Install with npm
npm install --save text-spinnersHow to use it:
1. Load the text-spinner’s stylesheet file in the document.
<link rel="stylesheet" href="path/to/spinners.css">2. Add the HTML structure to create a text-spinners.
<span class="loading"></span>For better accessibility with screen readers add aria-hidden="true" or role="progressbar" aria-label="Loading…" to the loading element.
There are many types of predefined loader and you can use anything from there that suits you.
<span class="loading dots"></span>– OR –
<span class="loading dots2"></span>Class for Loading
| Element | Class Name |
|---|---|
| Ellip (default) | loading |
| Dots | dots |
| Dots2 | dots2 |
| Dots3 | dots3 |
| Line | line |
| Line2 | line2 |
| Plus | plus |
| Lifting | lifting |
| Hamburger | hamburger |
| Bar | bar |
| Bar2 | bar2 |
| Circle | circle |
| Open-circle | open-circle |
| Arrow | arrow |
| Triangle | triangle |
| Triangles | triangles |
| Beam | beam |
| Bullet | bullet |
| Bullseye | bullseye |
| Rhomb | rhomb |
| Fish | fish |
| Toggle | toggle |
| Countdown | countdown |
| Time | time |
| Hearts | hearts |
| Earth | earth |
| Moon | moon |
| Monkey | monkey |
| Runner | runner |
| Box Bounce | box-bounce |
| Star | star |
| Matrix | matrix |
| Square | square |
| Words | words |
