Создание анимации загрузки строки с помощью css

Question

Я пробовал сделать анимацию на сплошной линии толщиной 2px, которая заполняет белый цвет от центра до конца в обе стороны, но эта попытка потерпела неудачу, потому что анимация просто заполнялась справа налево. Может ли кто-нибудь сказать мне, как создать анимацию, которая работает следующим образом: на рис. ниже, = это просто структура. Высота 2 пикселя и ширина 100 пикселей только от точки + и заливка цветом от центра до концов на равной длине слева и справа и завершение этого типа анимации.

_{Свободный перевод вопроса Create line loading animation using css от участника @m-naeem66622.}

Answer 1

что-то вроде такого ниже:

.line {
  width:100px;
  height:2px;
  background:linear-gradient(red 0 0) center/0% 100% no-repeat;
  animation:l 2s linear infinite alternate;
}

@keyframes l {
  to {background-size:100% 100%}
}

<div class="line"></div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Решение с помощью stroke-dasharray

Линия длиной 100px рисуется из центра двумя лучами.

Перед началом анимации stroke-dasharray:0,50 0,50; у обоих лучей черта равна нулю, а длина пробела максимальна - 50px Поэтому линию изначально не видно.
В конце анимации пробелы у обоих лучей становятся равны нулю, а черта принимает максимальное значение - 100px поэтому линия становится полностью видимой

#pol{
  fill:none;
  stroke:red;
  stroke-width:2;
  stroke-dasharray:0,50 0,50;
  animation:mid 2s linear infinite alternate;
 }
 @keyframes mid {
 to {stroke-dasharray:0,0,100,0;}
 }

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="200" height="200" viewBox="0 0 200 200" >  
<polyline id="pol" stroke-dasharray="0,100" points="50,50 150,50"  >
 </polyline> 
 <text x="100" y="46" font-size="24px" text-anchor="middle" fill="black"> animate</text>
</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

Answer 3

:checked + * /*.is-loading*/ { position: relative; }

:checked + *::before { /*.is-loading::before*/
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(255,255,255, 0.85) linear-gradient(to right, #fff, transparent 5%, transparent 95%, #fff);
  animation: fade-in 0.5s ease-out forwards;
  z-index: 98;
}

:checked + *::after { /*.is-loading::after*/
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 2px;
  transform: translate(-50%, -50%) scaleX(0.02);
  background: red;
  z-index: 99;
  animation: loading 1s cubic-bezier(0.5, 0.25, 0.3, 1) 0.3s infinite alternate,
             fade-in 0.75s ease-in forwards;
}

@keyframes loading {
  to { transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

? <input type="checkbox">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, consequuntur velit? Nulla tempora saepe veritatis recusandae aut doloremque suscipit minima nam consequatur vitae minus, iste eum architecto beatae alias neque!</p>

БЛОГ НА HUSL

Создание анимации загрузки строки с помощью css

Ответы (3 шт):

Решение с помощью stroke-dasharray