все гайды
Как сделать анимированную полосу загрузки используя html и css?

Задача
В данном уроке, мы создадим анимированную полосу загрузки используя только html и css. Основную работу будет выполнять css, от html нам потребуется только 1 строчка. Для анимации используется свойство css keyframe.
HTML
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="loading.css">
<head>
<meta charset="UTF-8">
<title>Progress bar</title>
</head>
<body>
<div class="progressbar">please wait..</div>
</body>
</html>
CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.progressbar {
width: 300px;
height: 25px;
border-radius: 8px;
box-shadow:
0 2px 0px 0px hsl(210,90%,35%),
2px 8px 15px 1px hsl(210,90%,70%);
background-color: hsl(210,90%,70%);
background-image:
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 12%,
rgba(255,255,255,.15) 15%,
rgba(255,255,255,.15) 30%,
rgba(255,255,255,0) 40%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,.15) 70%,
rgba(255,255,255,.15) 88%,
rgba(255,255,255,0) 88%
),
linear-gradient(
135deg,
transparent 0%,
transparent 25%,
hsl(210,90%,40%) 25%,
hsl(210,90%,40%) 50%,
transparent 50%,
transparent 75%,
hsl(210,90%,40%) 75%,
hsl(210,90%,40%) 100%
);
background-size: cover, 50px 50px;
background-position: top, 0 0;
text-indent: -999em;
animation: loading 1s infinite linear;
}
@keyframes loading {
0% {
background-position: top, 0 0;
}
100% {
background-position: top, 50px 0;
}
}