JSFiddle - React, Tailwind, and code Playground

by sukobuto

HTML

<div class="frame-loading" style="width: 200px; height: 200px;"></div>
<div class="frame-await-check" style="width: 200px; height: 200px;">ほにゃらら</div>
<div class="frame-checked" style="width: 200px; height: 200px;">ららら</div>

SCSS

@keyframes animatedBackground {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.frame-loading {
  border: 1px solid #aaa;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(220, 220, 220, 0.5) 25%, rgba(220, 220, 220, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%,
    rgba(220, 220, 220, 0.5) 75%, rgba(220, 220, 220, 0.5)
  );
  /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 14px 14px;
  background-position: 100% 0;
  -webkit-animation: animatedBackground 10s linear infinite;
  animation: animatedBackground 10s linear infinite;
}

.frame-await-check {
  border: 1px solid orange;
  background: rgba(255, 255, 200, 0.3);
  color: #f83;
  font-size: 12px;
}

.frame-checked {
  border: 1px solid #55ffaa;
  background: rgba(180, 255, 200, 0.3);
  color: #0a6;
  font-size: 12px;
}