Узнать, как создать предварительный загрузчик используя HTML, 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-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;
}Попробуйте сами »Другой пример
Пример того, как разместить загрузчик в середине страницы и показать "содержимое страницы" , когда загрузка завершена: