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:

Install with npm

npm install --save text-spinners

How 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
  • Loading
  • Dots
  • Dots2
  • Dots3
  • Line
  • Line2
  • Plus
  • Lifting
  • Hamburger
  • Bar
  • Bar2
  • Circle

HTML structure

<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

  • Open-circle
  • Arrow
  • Triangle
  • Triangles
  • Beam
  • Bullet
  • Bullseye
  • Rhomb
  • Fish
  • Toggle
  • Countdown
  • Time

HTML structure

<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

  • Hearts
  • Earth
  • Moon
  • Monkey
  • Runner
  • Box-bounce
  • Star
  • Matrix
  • Square
  • Words

HTML structure

<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