Время для прочтения: 0 мин. 13 сек.

Коллекция CSS прелоадеров

Веб разработчик Люк Хаас создал креативную коллекцию крутящихся прелоадеров, анимированных при помощи CSS3. Каждый "волчок" коллекции состоит всего из одного блока <div> с классом .loader и текстом "Loading…". Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.

Всем прелоадерам задан размер шрифта font-size в px (пиксели), а все другие размеры в em (относительная величина, зависящая от размера шрифта текущего элемента). Это сделано для того, чтобы можно было лекго изменить размер всего прелоадера, оперируя только размером шрифта.

Ссылки

Живой пример

See the Pen mliFw by mihdan (@mihdan) on CodePen.

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Антон Баранов

    не понятно, почему ссылку на сами лоадерсы не выложили: http://projects.lukehaas.me/css-loaders/

    • Потому, что народ требует, обычно, видеть сразу живые примеры, а ссылка на github присутствует. Но по вашей просьбе ссылку добавил)))

      • Антон Баранов

        просто я как-то не подумал, что на гитхабе могут примеры.
        спасибо)