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

19 грудня 2014 19:13 comandante 620 2

loader

У цій статті ми покажемо деякі приклади індикаторів завантаження, які побудовані виключно з допомогою 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 на вашому сайті? Який ваш улюблений?

620 5

Схожі матеріали:

Коментарі:

Partizanin

20 Січ 2015 19:39

Подскажите как добавить на сайт,а то что то не работает )
вот ссылка на тест http://jsfiddle.net/Partizanin/v9k9eL1n/

mike.bond

27 Тра 2015 13:48

Дійсно потрібна річ!Дякую!

Авторизуйтесь, щоб залишити коментар.