Лоадери на чистому CSS

У цій статті ми покажемо деякі приклади індикаторів завантаження, які побудовані виключно з допомогою CSS, без JavaScript і зображень.

1) Google/Матеріальний дизайн 

See the Pen xbwVXJ by brunjo (@brunjo) on CodePen.

2) It's Loading...

See the Pen Loading Text Animation by brunjo (@brunjo) on CodePen.

3)Стиль Windows

See the Pen Windows 8 Loader by brunjo (@brunjo) on CodePen.

4)Обертання

See the Pen Spinner by brunjo (@brunjo) on CodePen.

5)Кольоровий лоадер

See the Pen Colorful Bar Loader by brunjo (@brunjo) on CodePen.

6)"Сигнал"

See the Pen Signal Loader by brunjo (@brunjo) on CodePen.

7)Обертання/Змієподібний

See the Pen Spinner by brunjo (@brunjo) on CodePen.

8)Плаваючі точки

See the Pen Loading by brunjo (@brunjo) on CodePen.

9)М'яч

See the Pen Bouncing Ball by brunjo (@brunjo) on CodePen.

10)Стрічка

See the Pen XJmbNz by brunjo (@brunjo) on CodePen.

11)Класичний

See the Pen Loading Bar by brunjo (@brunjo) on CodePen.

Ми сподіваємося, що ви знайдете ці маленькі демки корисними. А ви використовуєте лоадери на чистому CSS на вашому сайті? Який ваш улюблений?