Как сделать - иконку загрузки
Узнайте, как создать иконку загрузки с помощью CSS.
Как создать иконку загрузки
Шаг 1) добавить HTML:
Пример
<div class="loader"></div>
Шаг 2) добавить CSS:
Пример
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
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
свойств and.
Наконец, мы добавляем, 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;
}
Другой пример
Пример того, как разместить загрузчик в середине страницы и показать "содержимое страницы", когда загрузка завершена: