Мы используем cookies

все гайды

Как сделать анимированную полосу загрузки используя 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;
    }
}

Есть идеи?
Pасскажите нам о них

hello@it-justice.com
Privacy policyTerms & conditions
Behance
Вконтакте
Dribble
Linkedin
Goodfirms
©2025. ООО Джастис-ИТ. Все права защищены.