Анимация иконки загрузки | CSS

Самый простой круглый значок.

Его можно сделать с помощью background и animation


<div class="loading"></div>

<div class="loading1"></div>

Или создать благодаря border и animation 


<div class="loading2"></div>
в f t
наверх ↑

8 комментариев:

Agent_Smith
Интересно) иконка-в смысле favicon? :)
NMitra
Не, для фавикона не подойдёт. Значок загрузки может появляться, когда, например, загружается изображение или обрабатывается форма...
Космо Мизраил Горыныч
Анимированную и управляемую фавиконку можно сделать с помощью элемента canvas, но для простых смертных блоггеров это слишком замудрённо :)
Можно просто указать в шаблоне блоггера фавиконку - gif-анимацию:
< link type="image/x-icon" rel="icon" href="Тут ссылка на гифку" >< /link >

Что касается лоадеров на голом CSS и HTML, их можно нагенерировать тут: http://cssload.net/

Также можно просто вращать какую-нибудь иконку, типа ☀ :)
NMitra
Да, сервис видела. Но там что-то много div в ход идут, а хотелось самого простого решения и вместе с тем самого распространённого. То есть если видна такая картинка, то не остаётся сомнения относительно её предназначения.
NMitra
Тем более хотелось внести свои пять копеек :)
Решения с background я ещё не видела: получился 1 div и полноценная прозрачность.
Космо Мизраил Горыныч
Тут кода поменьше, но не сразу поймёшь, что это лоадер :| http://tobiasahlin.com/spinkit/
Однако шестой вариант мне очень понравился :3
Анатолій Нечипурук
Ещё +13 вариантов http://goo.gl/Yh2H3d
в адресной строке ...65owwszp/1/embedded/result/ - где 1, 1 из 13 вариантов
NMitra
О, спасибо, интересно