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.
NPMnpm install --save text-spinners1. 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>| 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 |
<span class="loading"></span>Add respective class beside loading for different types of loading.
<span class="loading dots"></span>dots, dots2, dots3, line, line2, plus, lifting, hamburger, bar, bar2, circle
<span class="loading"></span>Add respective class beside loading for different types of loading.
<span class="loading dots"></span>open-circle, arrow, triangle, triangles, beam, bullet, bullseye, rhomb, fish, toggle, countdown, time
<span class="loading"></span>Add respective class beside loading for different types of loading.
<span class="loading dots"></span>hearts, earth, moon, monkey, runner, box-bounce, star, matrix, square, words