ローディング素材

スピナー

<div class="spinner"></div>
.spinner {
  width: 48px; height: 48px;
  border: 5px solid #eee;
  border-top: 5px solid #4f8cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

バー型ローダー

<div class="bar-loader"><div class="bar"></div></div>
.bar-loader {
  width: 80px; height: 12px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.bar-loader .bar {
  width: 0; height: 100%;
  background: linear-gradient(90deg, #4f8cff, #ff6ec4);
  animation: barload 1.2s infinite alternate;
}
@keyframes barload {
  0% { width: 0; }
  100% { width: 100%; }
}

ドット3つローダー

<div class="dot-loader">
  <span></span><span></span><span></span>
</div>
.dot-loader {
  display: flex;
  gap: 8px;
}
.dot-loader span {
  width: 14px; height: 14px;
  background: #4f8cff;
  border-radius: 50%;
  display: block;
  animation: dot-bounce 0.8s infinite alternate;
}
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  to { transform: translateY(-12px); opacity: 0.5; }
}

波紋ローダー

<div class="ripple-loader"><span></span></div>
.ripple-loader {
  position: relative;
  width: 48px; height: 48px;
}
.ripple-loader span {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border: 4px solid #4f8cff;
  border-radius: 50%;
  animation: ripple-ani 1.2s infinite;
  opacity: 0.7;
}
@keyframes ripple-ani {
  0% { transform: scale(0.2); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0; }
}

グラデーション円ローダー

<div class="grad-spinner"></div>
.grad-spinner {
  width: 48px; height: 48px;
  border: 5px solid #eee;
  border-top: 5px solid #ff6ec4;
  border-right: 5px solid #4f8cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

カラフルバー

<div class="color-bar-loader"><div class="bar"></div></div>
.color-bar-loader {
  width: 100px; height: 14px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.color-bar-loader .bar {
  width: 0; height: 100%;
  background: linear-gradient(90deg, #ff6ec4, #4f8cff, #6effc4, #ffe66e);
  animation: colorbarload 1.4s infinite alternate;
}
@keyframes colorbarload {
  0% { width: 0; }
  100% { width: 100%; }
}

ドーナツローダー

<div class="donut-loader"></div>
.donut-loader {
  width: 48px; height: 48px;
  border: 5px solid #eee;
  border-top: 5px solid #4f8cff;
  border-bottom: 5px solid #ff6ec4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

スケルトンローダー

<div class="skeleton-loader"></div>
.skeleton-loader {
  width: 120px; height: 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eee 25%, #f0f4ff 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton 1.2s infinite linear;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

バウンスローダー

<div class="bounce-loader"><span></span><span></span><span></span></div>
.bounce-loader {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.bounce-loader span {
  width: 12px; height: 12px;
  background: #4f8cff;
  border-radius: 50%;
  display: block;
  animation: bounce 0.6s infinite alternate;
}
.bounce-loader span:nth-child(2) { animation-delay: 0.2s; }
.bounce-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  to { transform: translateY(-18px); opacity: 0.7; }
}

リングローダー

<div class="ring-loader"></div>
.ring-loader {
  width: 48px; height: 48px;
  border: 4px solid #4f8cff44;
  border-top: 4px solid #4f8cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

フラッシュローダー

<div class="flash-loader"></div>
.flash-loader {
  width: 48px; height: 12px;
  background: linear-gradient(90deg, #4f8cff 0%, #fff 50%, #4f8cff 100%);
  border-radius: 8px;
  animation: flash 1s linear infinite;
}
@keyframes flash {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

ハートローダー

<div class="heart-loader"></div>
.heart-loader {
  width: 32px; height: 32px;
  position: relative;
  display: inline-block;
  animation: heart-beat 0.8s infinite;
}
.heart-loader::before,
.heart-loader::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 16px; height: 24px;
  background: #ff6ec4;
  border-radius: 16px 16px 0 0;
}
.heart-loader::before {
  left: 8px;
  transform: rotate(-45deg);
}
.heart-loader::after {
  left: 0;
  transform: rotate(45deg);
}
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}