<div class="arcade-1"></div>
<div class="arcade-2"></div>
<div class="arcade-3"></div>
<div class="arcade-4"></div>
<div class="arcade-5"></div>
<div class="arcade-6"></div>
<div class="arcade-7"></div>
<div class="arcade-8"></div>
<div class="arcade-9"></div>
<div class="arcade-10"></div>
.arcade-1 {
   width:45px;
   height:30px;
   animation: a1 2s infinite linear;
}

@keyframes a1{
  0%,
  25%  {background:
          linear-gradient(#e50021 0 0) 50% 0/66% 100% no-repeat}
  25.1%,
  50%  {background:
          linear-gradient(#004ce4 0 0) 0 0/100% 50% no-repeat,
          linear-gradient(#004ce4 0 0) 0 0/33% 100% no-repeat}
  50.1%,
  75%  {background:
          linear-gradient(#00e622 0 0) 100% 0/66% 50% no-repeat,
          linear-gradient(#00e622 0 0) 0 100%/66% 50% no-repeat}
  75.1%,
  100% {background:
          linear-gradient(#9d0be6 0 0) 0 100%/100% 50% no-repeat,
          linear-gradient(#9d0be6 0 0) 50% 0 /33%  50% no-repeat}
}

.arcade-2 {
  width:45px;
  height:30px;
  background:
      linear-gradient(#004ce4 0 0) 0 100%/100% 50%,
      linear-gradient(#004ce4 0 0) 0 0   /calc(100%/3) 100%;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0 0 0);
  animation: a2-0 2s infinite steps(4);
}
.arcade-2::before,
.arcade-2::after {
  content: "";
  position: absolute;
  inset:-50% 0 50%;
  background:
    linear-gradient(#00e622 0 0) 0 0      /calc(2*100%/3) 50%,
    linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: a2-1;
}
.arcade-2::after {
  inset:-100% 0 100%;
  background:
      linear-gradient(#e50021 0 0) 0    0/100%         50%,
      linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%;
  background-repeat: no-repeat; 
  animation-name: a2-2;
}
@keyframes a2-0{
  0%       {transform: translateY(-250%);clip-path: inset(100% 0 0 0)}
  25%,100% {transform: translateY(0);clip-path: inset(-100% 0 0 0)}
}
@keyframes a2-1{
  0% ,25%  {transform: translateY(-250%)}
  50%,100% {transform: translateY(0)}
}
@keyframes a2-2{
  0% ,50%  {transform: translateY(-250%)}
  75%,100% {transform: translateY(0)}
}

.arcade-3 {
  width:80px;
  height:70px;
  border:5px solid #000;
  padding:0 8px;
  background:
    linear-gradient(#fff 0 0) 0    0/8px 20px,
    linear-gradient(#fff 0 0) 100% 0/8px 20px,
    radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,
    #000;
  background-repeat: no-repeat; 
  animation: a3 2s infinite linear;
}
@keyframes a3{
  25% {background-position: 0 0   ,100% 100%,100% calc(100% - 5px)}
  50% {background-position: 0 100%,100% 100%,0    calc(100% - 5px)}
  75% {background-position: 0 100%,100%    0,100% 5px}
}

.arcade-4 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#000 98%,#0000) 55% 20%/8px 8px no-repeat,  
    #ffcc00;
  box-shadow:2px -6px 12px 0px inset rgba(0, 0, 0, 0.7);
  animation: a4 .5s infinite steps(5) alternate;
}
@keyframes a4{ 
    0% {clip-path: polygon(50% 50%,100%   0,100% 0,0 0,0 100%,100% 100%,100% 100%)}
  100% {clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)}
}

.arcade-5 {
  width: 90px;
  height: 24px;
  padding:2px 0;
  display: flex;
  animation: a5-0 3s infinite steps(6);
  background:
    linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
    radial-gradient(circle 3px,#eeee89 90%,#0000) 0 0/20% 100%
    #000;
  overflow: hidden;
}
.arcade-5::before {
  content: "";
  width: 20px;
  transform: translate(-100%);
  border-radius: 50%;
  background: #ffff2d;
  animation: 
    a5-1 .25s .153s infinite steps(5) alternate,
    a5-2  3s        infinite linear;
}

@keyframes a5-1{ 
    0% {clip-path: polygon(50% 50%,100%   0,100% 0,0 0,0 100%,100% 100%,100% 100%)}
  100% {clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)}
}

@keyframes a5-2{ 
  100% {transform: translate(90px)}
}

@keyframes a5-0{ 
  100% {background-size:120% 100%,20% 100%}
}


.arcade-6 {
  width:80px;
  height:60px;
  background:
    linear-gradient(#fff 0 0) left /calc(50% - 15px) 8px no-repeat,
    linear-gradient(#fff 0 0) right/calc(50% - 15px) 8px no-repeat,
    conic-gradient(from 135deg at top,#0000, red 1deg 90deg,#0000 91deg) bottom/14px 8px repeat-x,
    #000;
  border-bottom: 2px solid red;
  position: relative;
  overflow: hidden;
  animation: a6-0 1s infinite linear;
}

.arcade-6::before {
  content: "";
  position: absolute;
  width:10px;
  height:14px;
  background:lightblue;
  left:-5px;
  animation:
    a6-1 2s infinite cubic-bezier(0,100,1,100), 
    a6-2 2s infinite linear;
}

@keyframes a6-0{
  50% { background-position: left,right,bottom -2px left -4px}
}

@keyframes a6-1{
  0%,27%   {bottom: calc(50% + 4px)}
  65%,100% {bottom: calc(50% + 4.1px)}
}

@keyframes a6-2{
  100% {left:100%}
}


.arcade-7 {
  width:70px;
  height:50px;
  background:
    conic-gradient(from 135deg at top,#0000, #fff 1deg 90deg,#0000 91deg) right -20px bottom 8px/18px 9px,
    linear-gradient(#fff 0 0) bottom/100% 8px,
    #000;
  background-repeat: no-repeat;
  border-bottom: 8px solid #000;
  position: relative;
  animation: a7-0 2s infinite linear;
}

.arcade-7::before {
  content: "";
  position: absolute;
  width:10px;
  height:14px;
  background:lightblue;
  left:10px;
  animation:a7-1 2s infinite cubic-bezier(0,200,1,200);
}

@keyframes a7-0{
  100% { background-position: left -20px bottom 8px,bottom}
}

@keyframes a7-1{
  0%,50%   {bottom: 8px}
  90%,100% {bottom: 8.1px}
}

.arcade-8 {
   font-size: 17px;
   font-family: monospace;
   font-weight: bold;
   background: 
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
   background-size:calc(1ch + 1px) 100%;
   background-repeat: no-repeat;
   border-bottom:10px solid #0000; 
   position: relative;
   animation: a8-0 3s infinite linear;
   clip-path: inset(-20px 0);
 }
 .arcade-8::before {
    content:"Loading";
 }
.arcade-8::after {
  content: "";
  position: absolute;
  width:10px;
  height:14px;
  background:#25adda;
  left:-10px;
  bottom: 100%;
  animation:a8-1 3s infinite linear;
}
  @keyframes a8-0{
    0%,
    12.5% {background-position: calc(0*100%/6) 0   ,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    25%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    37.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    50%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    62.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    75%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6)    0,calc(6*100%/6) 0}
    87.4% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 0}
    100%  {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 40px}
  }
@keyframes a8-1{
  100% {left:115%}
}

.arcade-9 {
   font-size: 17px;
   font-family: monospace;
   font-weight: bold;
   background: 
    linear-gradient(#000 0 0) left ,
    linear-gradient(#000 0 0) right;
   background-repeat: no-repeat; 
   border-right: 5px solid #0000;
   border-left: 5px solid #0000;
   background-origin: border-box;
   position: relative;
   animation: a9-0 2s infinite;
 }
  @keyframes a9-0{
    0%,25%    {background-size: 50% 100%}
    25.1%,75% {background-size: 0 0,50% 100%}
    75.1%,100%{background-size: 0 0,0 0}
  }
 .arcade-9::before {
    content:"Loading";
 }
  .arcade-9::after {
    content: "";
    position: absolute;
    top:100%;
    left:0;
    width:22px;
    height:60px;
    background: 
     linear-gradient(90deg,#000 4px,#0000 0 calc(100% - 4px),#000 0) bottom            /22px 20px,
     linear-gradient(90deg,red  4px,#0000 0 calc(100% - 4px),red  0) bottom 10px left 0/22px 6px,
     linear-gradient(#000 0 0) bottom 3px left 0  /22px 8px,
     linear-gradient(#000 0 0) bottom 0   left 50%/8px  16px;
   background-repeat: no-repeat;
   animation: a9-1 2s infinite;
 }

 @keyframes a9-1{
  25%   { background-position:bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;left:0}
  25.1% { background-position:bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;left:0}
  50%   { background-position:bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;left:calc(100% - 22px)}
  75%   { background-position:bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;left:calc(100% - 22px)}
  75.1% { background-position:bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;left:calc(100% - 22px)}
}

.arcade-10 {
   font-size: 17px;
   font-family: monospace;
   font-weight: bold;
   padding:30px 2px 50px;
   background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat; 
   position: relative;
   overflow: hidden;
   animation: a10-0 2s infinite cubic-bezier(1,175,.5,175);
 }
 @keyframes a10-0{
  0%,30%   { background-position: 0 0px }
  50%,100% { background-position: 0 -0.2px }
}
 .arcade-10::before {
    content:"Loading";
 }

.arcade-10::after {
   content:"";
   position: absolute;
   width:34px;
   height:28px;
   top:110%;
   left:calc(50% - 16px);
   background:
    linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000) bottom 26px left 50%,
    linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0) bottom 24px  left 50%,
    linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0) bottom 22px left 50%,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0) bottom 20px left 50%,
    linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0) bottom 18px left 50%,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0) bottom 16px left 50%,
    linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0) bottom 14px left 50%,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0) bottom 12px left 50%,
    linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0) bottom 10px left 50%,
    linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px, #643700 0) bottom 8px left 50%,
    linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0) bottom 6px left 50%,
    linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0) bottom 4px left 50%,
    linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0) bottom 2px left 50%,
    linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0 ) bottom 0px left 50%;
  background-size: 34px 2px;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: a10-1;
}
@keyframes a10-1{
  50%,100% { top:109.5% };
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
  padding-bottom:80px;
}

* {
  box-sizing: border-box;
}
/* more loaders here: https://dev.to/afif/series/12889 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.