Набор анимированных svg-preloader иконок

Небольшая подборка анимированных SVG иконок, которые подойдут для использования на сайтах в качестве загрузчиков при ожидании выполнения каких-то операций. Любую из них можете бесплатно скачать и применять по своему усмотрению.

Преимущества формата SVG перед GIF очевидны — векторная графика масштабируется без потери качества, а также может быть раскрашена в нужные цвета.

Чтобы скачать любую иконку, нажмите на неё правой кнопкой мыши и выбирите «Сохранить изображение как...».

Пример использования

Подобные иконки часто применяются для отображения посередине полупрозрачного поля, которое перекрывает область, в которой временно требуется запретить все дейсвия. Посмотрим как такая разметка может выглядеть на практике.

/* HTML код */
<div class="example-overlay">
    <img src="/images/svg-loaders/oval.svg" width="40">
</div>

/* CSS стили */
<style>
.example-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 200px;
}
</style>

Как изменить цвет

По-умолчанию изображения имеют белую заливку. Рассмотрим как изменить её.

1. Отрктываем svg файл через любой текстоый редактор.

2. Указываем в свойстве «fill» любой цвет в «HEX» формате.

   <svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#f00">
   

   В данном примере вместо «#fff» установил значение «#f00», что равняется красному цвету.

3. Сохраняем и используем.

PS Нарисовал их для нас Сэм Херберт из Нью-Йорка.