ローディング
CSS

Progress Line

画面上部を走るインジケーター。ページ遷移に。

HTML
<div class="progress-bar"></div>
CSS
.progress-bar {
  width: 100%;
  height: 2px;
  background: #eee;
  position: relative;
  border-radius: 1px;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: #1a1a1a;
  border-radius: 1px;
  animation: progress-slide 1.5s ease-in-out infinite;
}
@keyframes progress-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}