/* --- 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.bar3::after {
  font-family: "Iosevka SS11 Web","Iosevka";
  content: "\A\A\A\A\A\A";
  animation: spin7 2s steps(7) infinite alternate;
}
/**/

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

.loading.open-circle2::after {
  font-family: "Iosevka SS11 Web","Iosevka";
  content: "\A\A\A\A\A";
  animation: spin6 .5s steps(6) infinite;
}

.loading.beam::after {
  content: "\A=   \A ==  \A === \A ====\A  ===\A   ==\A    =\A";
  animation: spin9 1.2s steps(9) infinite;
  font-family: monospace;
}
.loading.beam2::after {
  font-family: "Iosevka SS11 Web","Iosevka";
  content: "\A\A\A\A\A\A\A\A";
  animation: spin9 1.2s steps(9) infinite;
}

.loading.toggle2::after {
  font-family: "Iosevka SS11 Web","Iosevka";
  content: "\A";
  animation: spin2 1s steps(2) infinite;
}


/* --- Animations --- */

@keyframes spin1  { to { transform: translateY( -1.5em); } }
@keyframes spin2  { to { transform: translateY( -3.0em); } }
@keyframes spin3  { to { transform: translateY( -4.5em); } }
@keyframes spin4  { to { transform: translateY( -6.0em); } }
@keyframes spin5  { to { transform: translateY( -7.5em); } }
@keyframes spin6  { to { transform: translateY( -9.0em); } }
@keyframes spin7  { to { transform: translateY(-10.5em); } }
@keyframes spin8  { to { transform: translateY(-12.0em); } }
@keyframes spin9  { to { transform: translateY(-13.5em); } }
@keyframes spin10 { to { transform: translateY(-15.0em); } }
@keyframes spin11 { to { transform: translateY(-16.5em); } }
@keyframes spin12 { to { transform: translateY(-18.0em); } }