Как сделать - Загрузчик
Узнать, как создать предварительный загрузчик с помощью 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
.
Наконец, мы добавляем animation
это заставляет синюю вещь вращаться вечно с 2-секундной скоростью анимации.
Примечание: Вы также должны включить префикс -webkit- для браузеров, которые не поддерживают анимацию и свойства преобразования. Нажмите на пример, чтобы увидеть, как это сделать.
Добавить больше блесны
Пример
.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;
}
Редактор кода »Другой пример
Пример того, как разместить загрузчик в середине страницы и показать "содержимое страницы" , когда загрузка завершена: