• Гость
 
For-Web
  • Главная
  • Вебмастеру new
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
    • VIP - Бесплатно
  • Скрипты сайтов
    • Bitcoin
    • Fruit Farm
    • Бонусники, Удвоители
    • Движки сайтов
    • Соц сети
    • Обмен визитами
    • Скрипты буксов
    • Скрипты рекламы
    • Интернет магагзин
    • Браузерные игры
    • Хайпы, Пирамиды
    • Скрипты CSGO
    • Скрипты хостинга
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • WordPress
    • Шаблоны
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Windows
    • Windows
    • Программы
    • Темы
  • Инфо
    • О проекте
    • Обратная связь
    • Пользователи
    • Статистика
    • Объявления на сайте
    • Партнёрство
    • Privacy Policy
главная » Иконки , Кнопки » SVG прелоадеры

SVG прелоадеры


SVG прелоадерыАнимированные SVG иконки прелоадеров   отлично впишутся в дизайн сайте. Чем, что то описывать лучше один раз увидеть. Ну, а ниже сам код: 
HTML 

<h1>SVG Loading Images</h1>

<!-- 1 -->
<div class="loader loader--style1" title="0">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
  <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 20 20"
      to="360 20 20"
      dur="0.5s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

<!-- 2 -->
<div class="loader loader--style2" title="1">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

<!-- 3  -->
<div class="loader loader--style3" title="2">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

<!-- 4 -->
<div class="loader loader--style4" title="3">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0s" dur="0.6s" repeatCount="indefinite" />       
    </rect>

    <rect x="10" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />       
    </rect>
    <rect x="20" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />       
    </rect>
  </svg>
</div>

<!-- 5 -->
<div class="loader loader--style5" title="4">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- 6 -->
<div class="loader loader--style6" title="5">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.15s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.3s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- 7 -->
<div class="loader loader--style7" title="6">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="7" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="14" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- 8 -->
<div class="loader loader--style8" title="7">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="8" y="10" width="4" height="10" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="16" y="10" width="4" height="10" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>


CSS 
body{
  padding: 1em;
  background: #2B3134;
  color: #777;
  text-align: center;
  font-family: "Gill sans", sans-serif;
  width: 80%;
  margin: 0 auto;
}
h1{
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}
p{
  font-style: italic;
}
.loader{
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!


Используете ли вы анимацию на сайте

Скачать файл бесплатно

Вы находитесь на странице скачивания файла. Кнопка загрузки внизу страницы. Если нет кнопки , значит нет файла. Нет файла - просьба сообщить администартору удобным способом. Спасибо большое за понимание!

Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят чисто ознакомительный характер, всё файлы взяты из открытых источников, соответсвенно Вы их используете на свой страх и риск.







  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

20-11-2018, 21:24

Дата

Иконки , Кнопки

Категория
  • Комментариев: 0
  • Просмотров: 674
Анимация
Рождественская ёлочка
Украшения для сайта
Новогодние украшения от яндекса
CSS
Цвета в CSS
Учебник Bootstrap
Руководство Bootstrap Card
Учебник Bootstrap
Система сеток Bootstrap 4
Украшения для сайта
Новогодний скрипт гирлянды на сайт
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Полезные советы
Для доступа к мобильной версии сайта DLE с ПК достаточно перейти по адресу /index.php?action=mobile

Комментарии
Подскажите, как и где получить API ключ, чтобы установить модуль?
15 мая 2022 14:16

Solyaris2000

Просьба! Когда выкладываете модули то, пишите хотя-бы короткую инструкцию, как это всё устанавливать. Не все же
15 мая 2022 13:09

Solyaris2000

KRIK73, А у меня вообще выдаёт вот такую ошибку: Fatal error: Uncaught Error: Class "HTMLPurifier_Config" not found
13 мая 2022 22:32

vir2oz

Здравствуйте ! на новом движке не работает 15.1  . белый экран
30 апреля 2022 17:02

KRIK73

на 15.1 уже не работает
22 апреля 2022 10:11

blink


Пользуетесь ли Вы облаком тегов


  • For-WEb.Ru © 2018 - 2022  

Авторизация


Регистрация Забыл пароль