JSFiddle - React, Tailwind, and code Playground

HTML

<p>ドット<span class="loading"></span></p>

<p>ドット2<span class="loading dots"></span></p>


<p>ドット3<span class="loading dots2"></span></p>
 
<p>ドット4<span class="loading dots3"></span></p>

<p>ライン1<span class="loading line"></span></p>

<p>ライン2<span class="loading line2"></span></p>

<p>プラス<span class="loading plus"></span></p>

<p>リフト<span class="loading lifting"></span></p>

<p>メニュー<span class="loading hamburger"></span></p>
 
<p>バー<span class="loading bar"></span></p>

<p>バー2<span class="loading bar2"></span></p>

<p>サークル1<span class="loading circle"></span></p>

<p>サークル2<span class="loading open-circle"></span></p>

<p>矢印<span class="loading arrow"></span></p>

<p>三角<span class="loading triangle"></span></p>

<p>複数三角<span class="loading triangles"></span>

<p>ビーム<span class="loading beam"></span></p>

<p>弾丸<span class="loading bullet"></span></p>

<p>的<span class="loading bullseye"></span></p>

<p>ひし形<span class="loading rhomb"></span></p>

<p>さかな<span class="loading fish"></span></p>

<p>スイッチ<span class="loading toggle"></span></p>

<p>カウントダウン※10から始まり0で止まります<span class="loading countdown"></span></p>

<p>時計<span class="loading time"></span></p>

<p>ハート<span class="loading hearts"></span></p>

<p>地球<span class="loading earth"></span></p>

<p>月<span class="loading moon"></span></p>

<p>さる<span class="loading monkey"></span></p>

<p>任意のキーワード<span class="loading words"></span></p>

CSS

/* --- Basics --- */

.loading {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  margin-top: -0.3em;
  line-height: 1.5em;
  vertical-align: text-bottom;
}

.loading::after {
  display: inline-table;
  white-space: pre;
  text-align: left;
}

/* --- Types --- */

/* default loading is ellip */
.loading::after {
  content: "\A.\A..\A...";
  animation: spin4 2s steps(4) infinite;
}

.loading.line::after {
  content: "/\A–\A\\\A|";
  text-align: center;
  animation: spin4 1s steps(4) infinite;
}

.loading.line2::after {
  content: "╲\A│\A╱\A─";
  text-align: center;
  animation: spin4 1s steps(4) infinite;
}

.loading.plus::after {
  content: "┽\A╀\A┾\A╁";
  animation: spin4 1s steps(4) infinite;
}

.loading.dots::after {
  content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏";
  animation: spin10 1s steps(10) infinite;
}

.loading.dots2::after {
  content: "⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳";
  animation: spin9 1s steps(9) infinite;
}

.loading.dots3::after {
  content: "⋮\A⋰\A⋯\A⋱";
  text-align: center;
  animation: spin4 1s steps(4) infinite;
}

.loading.lifting::after {
  content: "꜈꜍\A꜉꜎\A꜊꜏\A꜋꜐\A꜌꜑";
  animation: spin5 .5s steps(5) infinite alternate;
}

.loading.hamburger::after {
  content: "☱\A☲\A☴";
  animation: spin3 .3s steps(3) infinite alternate;
}

.loading.bar::after {
  content: "▏\A▎\A▍\A▌\A▋\A▊\A▉";
  animation: spin7 1s steps(7) infinite alternate;
}

.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}

.loading.circle::after {
  content: "◴\A◷\A◶\A◵";
  animation: spin4 1s steps(4) infinite;
}

.loading.open-circle::after {
  content: "◜\A◠\A◝\A◞\A◡\A◟";
  animation: spin6 .6s steps(6) infinite;
}

.loading.arrow::after {
  content: "←\A↖\A↑\A↗\A→\A↘\A↓\A↙";
  animation: spin8 1s steps(8) infinite;
}

.loading.triangle::after {
  content: "◢\A◣\A◤\A◥";
  animation: spin4 1s steps(4) infinite;
}

.loading.triangles::after {
  content: "▹▹▹▹▹\A ▸▹▹▹▹\A ▹▸▹▹▹\A ▹▹▸▹▹\A ▹▹▹▸▹\A ▹▹▹▹▸";
 ...