Создание анимированного индикатора выполнения, такого как Ant Design, с использованием CSS3 - PullRequest
Новая
       348

Создание анимированного индикатора выполнения, такого как Ant Design, с использованием CSS3

1 голос
/ 07 августа 2020

Я пытаюсь создать анимированный индикатор выполнения, похожий на тот, что есть в Ant Design: https://ant.design/components/progress/

Вот изображение:

image 

.progress {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 10px;
    border-radius: 10px;
    background-color: #ecf0f1;
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    transition: width 0.6s ease;
    background-color: dodgerblue;
}
.progress-bar-animated {
    background-image: linear-gradient(to right, transparent 33%, rgba(255, 255, 255, 0.3) 50%, transparent 66%);
    background-size: 300% 100%;
    animation: progress-bar-shine 2s infinite;
}
@keyframes progress-bar-shine {
    0% {
        background-position: right;    
    }
}
<div style="width: 300px">  
  <div class="progress">
    <div class="progress-bar progress-bar-animated" style="width: 50%" role="progressbar"></div>
  </div>
</div>

Это довольно похоже, но при увеличении масштаба вы можете увидеть разницу между двумя анимациями. Что мне нужно настроить, чтобы сделать мой более похожим на Ant Design?

Обратите внимание , я не спрашиваю, как округлить полосу справа. Я спрашиваю о белом сиянии, которое идет с одной стороны на другую.

1 Ответ

1 голос
/ 07 августа 2020

Кажется, это анимация ширины в сочетании с исчезновением непрозрачности: 

.progress {
    display: flex;
    overflow: hidden;
    height: 30px;
    border-radius: 50px;
    background-color: #ecf0f1;
}
.progress-bar {
    overflow: hidden;
    text-align: center;
    border-radius:inherit;
    background-color: dodgerblue;
}
.progress-bar-animated {
  position:relative;
}
.progress-bar-animated::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:inherit;
    background:linear-gradient(to right,transparent,rgba(255, 255, 255, 0.7));
    transform:translateX(-100%);
    animation: progress-bar-shine 2s infinite;
}
@keyframes progress-bar-shine {
    to {
      transform:translateX(0);
      opacity:0.1;
    }
}
<div style="width: 400px">  
  <div class="progress">
    <div class="progress-bar progress-bar-animated" style="width: 50%" role="progressbar"></div>
  </div>
</div>
...