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

Набор анимированных svg-preloader иконок
Комментарии: 7

Небольшая подборка анимированных 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 Нарисовал их для нас Сэм Херберт из Нью-Йорка.

Темы:
HTMLCSS
Ещё интересное — 6
Комментарии —
  1. SNAX
    SNAX06 мая 2021, 17:27(был изменён)#
    0_0
    1. Сэм Херберт
      Сэм Херберт08 октября 2021, 16:55#
      Как скачать то ёбаный в рот?
      1. Andy Si09 октября 2021, 11:26#
        Там написано как. Правой кнопкой мыши на икону и сохранить изображение.
      2. aborigenus
        aborigenus10 ноября 2021, 20:45#
        кот прикольный, спасибо.
        1. Andy Si10 ноября 2021, 22:05#
          Передам ему комплимент)
        2. Yuriy
          Yuriy08 декабря 2022, 22:54#
          Спасибо!) очень крутой набор
          1. пан
            пан22 мая 2024, 15:12#
            Дароу
            © REALADMIN.RU   2024 г.
            Страница сгенерирована: 0,1964 s | 4 mb.
            На каком уровне Вы играете в шахматы?
            OPROS