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

Здесь вы узнаете, как сделать вращающийся индикатор загрузки при помощи CSS.

Как сделать индикатор загрузки

Шаг 1) Добавляем HTML:

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

Шаг 2) Добавляем CSS:

.loader {
  border: 16px solid #f3f3f3; /* Светло-серый */
  border-top: 16px solid #3498db; /* Синий */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Объяснение примера

Свойство border определяет размер и цвет бордюра индикатора. Свойство border-radius трансформирует индикатор в круг.

Синий отрезок, который вращается внутри бордюра, определяется при помощи свойства border-top. Также, вы можете установить свойства border-bottom, border-left и/или border-right, если хотите сделать больше крутящихся отрезков (см. пример ниже).

Размер индикатора определяется свойствами width и height.

И, наконец, мы добавляем правила анимации, по которым синий отрезок будет вечно вращаться со скоростью оборот за 2 секунды.

Примечание: Вы также должны добавить префикс -webkit- для браузеров не поддерживающих свойства animation и transform. Как это сделать смотрите в коде примеров.

Еще спиннеры

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}