Как создать: CSS загрузчик

Узнайте, как использовать 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 секунды.

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

добавить больше вращателей

Пример

.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;
}

Попробуйте сами

Другой пример

Как поместить загрузчик в центр страницы и показать "содержимое страницы" при завершении загрузки:

Пример

Попробуйте сами