Иконка загрузки

Когда веб-приложение взаимодействует с сервером идёт загрузка, самое время для иконки, чтобы показать пользователю что его вызов приложения обрабатываются. Часто встречается маленький вращающийся GIF-файл. Есть несколько сервисов, которые умеют их создавать preloaders.net и ajaxload.info.

GIF лучший кросс-браузерный вариант, но у них есть ряд недостатков:

  • Изображения GIF не поддерживают прозрачность. Вы должны быть осторожны при размещении изображений на цветном фоне.
  • Растровые изображения не будет масштабироваться нормально. Если вы измените размеры, необходимо создать новый образ.
  • Если вы не будете осторожны, файл анимации может иметь большой размер.
  • Изображения несут дополнительный запрос HTTP. В то время как изображение будет храниться в кэше, загрузка может занять больше времени, чем фоновый процесс!

К счастью, CSS3 позволяет создавать иконки без загрузки изображений. Они легко создают масштаб и цвета которые можно использовать на любом фоне. Вам потребуется:

  1. HTML одного элемента, например <div id="ajaxloader"></div>.
  2. Несколько фонов CSS, границы и заливка эффектов для создания графического значка.
  3. CSS3 трансформации и анимации, чтобы повернуть или переместить элемент.

Демо

Совместимость с браузерами

CSS3 трансформации и анимации требуют префиксы:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000)

Создание иконки

div может быть размещен в любом месте документа, хотя было бы лучше добавить его дочерним элементом тела. Он появится над другими элементами на этой странице.

Значок CSS просто устанавливает широкие белые округлые границы:

#ajaxloader
    {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 8px solid #fff;
        border-right-color: transparent;
        border-radius: 50%;
        box-shadow: 0 0 25px 2px #eee;
    }

В результате:

CSS Ajax значока
Анимация иконки первый вариант

Легко настроить свойства для различных эффектов, например, добавление границы с права 0 :

CSS Ajax иконка 2
Анимация иконки второй вариант

Анимация иконки

Для того чтобы значок и пульсировал, мы применяем преобразования и непрозрачности в анимации CSS3. Анимация CSS3 применяются к элементу кодом:

#ajaxloader
{
    animation: spin 1s linear infinite;
}

затем ключевые кадры анимации:

@keyframes spin
  {
  from { transform: rotate(0deg);   opacity: 0.2; }
  50%  { transform: rotate(180deg); opacity: 1.0; }
  to   { transform: rotate(360deg); opacity: 0.2; }
  }

Смотрите пример анимационная загрузка только с CSS3 в статье «Анимационная загрузка CSS3»

54321
(0 голосов, в среднем: 0 из 5)