3

В своей анимации мне нравится использовать трансформацию. Это также возможно сделать со свойством left / right. Но мне нравится использовать transform. Мне нужно переместить freeze-loading-bar на 100% вправо, и это должен быть бесконечный цикл.

Как я могу переместить полосу загрузки вправо на 100% / полностью?

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;

  padding: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  
  /** disual purpose **/
  /** overflow: hidden; **/
  
}

.freeze-loading-bar {
  position: absolute;
  left: 0;
  width: 80px;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(100%);
    }
}
<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>

Свободный перевод вопроса Is it possible to use CSS translateX(100%) to make a moving animation? от участника @Tahazzot.

1

2 ответа 2

3

Сохраняйте элемент на всю ширину (используя left/right), затем используйте градиент для окраски, чтобы раскрасить только его часть. Теперь вы можете положиться на translateX(100%) независимо от ширины раскраски:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* ширина окраски */

  position: absolute;
  left: calc(-1*var(--w));
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}
<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

Другой вид анимации:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px; /* the width of coloration */

  position: absolute;
  left: 0;
  right: var(--w);
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 1s linear infinite alternate;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}
<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>


Другой синтаксис:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
  transform: translateX(calc(-1*var(--w)));
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}
<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

И еще один пример:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  right: 0;
  width:calc(100% + var(--w));
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}
<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

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

3

С точки зрения отзывчивости используйте %, а не px, чем проста математика,

Если width полосы составляет 20% (1/5 родительской)

translateX from -100% to 500% (100% * 5)

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 0 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  position: relative;
  top: 0;
  width: 20%;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(500%);
  }
}
<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>

Свободный перевод ответа от участника @Roko C. Buljan.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.