11 078 Скрипты / Loading

Анимированные прелоадеры

Несколько видов анимированных загрузчиков для сайта. Анимация сделана на CSS3

HTML

<div class="loader-one">
    <div class="loader-one__center"></div>
    <div class="loader-one__item"></div>
    <div class="loader-one__item"></div>
    <div class="loader-one__item"></div>
    <div class="loader-one__item"></div>
    <div class="loader-one__item"></div>
    <div class="loader-one__item"></div>
</div>
<svg class="loader-one__svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

CSS


HTML

<div class="loader-two">
    <div class="loader-two__preloader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS


HTML

<div class="loader-three"></div>

CSS


HTML

<div class="loader-four">
  <div class="loader-four__preloader"></div>
</div>

CSS


HTML

<div class="loader-five">
  <div class="loader-five__dot">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="loader-five__dot">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="loader-five__dot">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

CSS


HTML

<div class="loader-six">
  <div class="loader-six__item loader-six--1"></div>
  <div class="loader-six__item loader-six--2"></div>
  <div class="loader-six__item loader-six--3"></div>
  <div class="loader-six__item loader-six--4"></div>
</div>
CSS
Скачать 405Загрузок 7,01 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи