움직이는 프로그래스-바(Progress-bar) 만들기

저는 Tailwind CSS를 일부 사용하여 제작하였습니다.

대부분 relative/absolute 또는 꾸며주는 css들을 위주로 사용했습니다.

 

대각선으로 무한하게 움직이는 프로그래스-바

HTML

<div class="w-full h-5 m-3">
  <div class="progress-bar"></div>
</div>

CSS

.progress-bar {
    min-height: 100%;
    width: calc(113px * 4);
    background-color: #1dd3d0;
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 5px,
      #fff 5px,
      #fff 10px
    );
 
  	animation: slide 3s linear infinite;
  	will-change: background-position;
  }
  @media only screen and (max-width: 450px) {
    .bar {
      width: calc(113px * 3);
    }
  }
  @media only screen and (max-width: 350px) {
    .bar {
    	width: calc(113px * 2);
    }
  }
  @keyframes slide {
    from {
      background-position-x: 0;
    }
    to {
      background-position-x: 113px;
    }
  }

 

 

좌우로 움직이는 프로그래스-바

HTML

<div class="w-full h-5 m-3 relative border border-black overflow-hidden">
    <div class="move-bar absolute bg-cyan-300 w-16 h-full"></div>
  </div>

CSS

.move-bar {
  animation: moveBox 4s linear infinite alternate-reverse;
}
@keyframes moveBox {
  from {
    left: -3%;
  }
  to {
    left: 97%;
  }
}