<div class="group">
  <button type="button">
    <div class="round moon"></div>
  </button>
  <h4>moon spinner</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round arc"></div>
    <div class="round arc"></div>
  </button>
  <h4>arc spinner</h4>
</div>

<div class="group">
  <button type="button">
    <div class="spinner round"></div>
    <div class="arrow"></div>
  </button>
  <h4>arrow spinner</h4>
</div>

<div class="group">
  <button type="button">
    <div class="ball-container">
      <div class="round ball"></div>
    </div>
  </button>
  <h4>bounce ball waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round flip-flap"></div>
  </button>
  <h4>flip-flap waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round money">$</div>
  </button>
  <h4>money waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round zoom"></div>
    <div class="round zoom"></div>
  </button>
  <h4>waves waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round zoom"></div>
  </button>
  <h4>zoom waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="round cosmos"></div>
    <div class="round cosmos"></div>
  </button>
  <h4>cosmos waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="dot round bounce"></div>
    <div class="dot round bounce"></div>
    <div class="dot round bounce"></div>
    <div class="dot round bounce"></div>
  </button>
  <h4>4 bounced dots waiter</h4>
</div>

<div class="group">
  <button type="button">
    <div class="dot round left-right"></div>
    <div class="dot round left-right"></div>
    <div class="dot round left-right"></div>
    <div class="dot round left-right"></div>
    <div class="dot round left-right"></div>
  </button>
  <h4>left right dots</h4>
</div>

body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
* {
  font-family: sans-serif;
  font-size: 1rem;
}
h4 {
  margin: -0.5rem 0.1rem 0 0.1rem;
  text-align: center;
}
.group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  height: 6rem;
  width: 12rem;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.2rem 0.5rem #00000040;
}
button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 5rem;
  margin: 1rem;
  border-radius: 0.5rem;
  border: solid 1px #c0c0c0ff;
  box-shadow: 0.05rem 0.1rem 0.1rem #00000040,
    0.05rem 0.1rem 0.2rem #ffffffff inset;
}

/** WAITERS AND SPINNERS DESIGN **/

.round {
  box-sizing: border-box;
  height: 1rem;
  width: 1rem;
  margin: 0.1rem;
  border-radius: 50%;
}

.moon {
  border-top: solid 0.2rem #0040c0ff;
  animation: infinite linear 1.2s turn;
}

.arc {
  position: absolute;
  border: solid 0.2rem #0040c0ff;
  border-color: #0040c0ff #0040c0ff transparent transparent;
  animation: infinite cubic-bezier(0.5, 0, 0.5, 1) 2s turn;
}
.arc:first-child {
  animation-delay: -0.5s;
}

.spinner,
.half-spinner,
.arrow {
  position: absolute;
  animation: infinite linear 2s turn;
}
.spinner {
  height: 1rem;
  width: 1rem;
  border: solid 0.2rem #0040c0ff;
  border-color: #0040c0ff #0040c0ff #0040c0ff transparent;
}
.half-spinner {
  height: 1rem;
  width: 1rem;
  border: solid 0.2rem #0040c0ff;
  border-color: transparent transparent #0040c0ff transparent;
}
.arrow {
  height: 1.25rem;
  width: 1.25rem;
  background-color: #0040c0ff;
  clip-path: polygon(0% 60%, 40% 60%, 20% 30%, 0% 60%);
  animation-delay: 0.2s;
}

.ball-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000000;
  animation: infinite linear 2s ball;
}
.ball {
  height: 0.8rem;
  width: 0.8rem;
  background-color: #ffffffff;
  border-right: solid 0.4rem #0040c0ff;
  border-left: solid 0.2rem #0038b0ff;
  animation: infinite linear 1s turn alternate;
}

.flip-flap {
  background-color: #0040c0ff;
  animation: infinite linear 1.2s flip-flap;
}

.money {
  background-color: #efd000ff;
  color: #804000ff;
  animation: infinite linear 2s money;
}

.zoom {
  position: absolute;
  border: solid 0.2rem #0040c0ff;
  animation: infinite ease-out 1.2s zoom;
}
.zoom:first-child {
  animation-delay: -0.6s;
}

.dot {
  height: 0.4rem;
  width: 0.4rem;
  background-color: #0040c0ff;
}
.bounce {
  animation: infinite cubic-bezier(1, 0.75, 0.25, 1) 1.2s bounce;
}
.left-right {
  animation: infinite linear 2s left-right;
}
.dot:not(:first-child) {
  margin-left: 0.1rem;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}
.dot:nth-child(4) {
  animation-delay: 0.6s;
}
.dot:nth-child(5) {
  animation-delay: 0.8s;
}

.cosmos {
  position: absolute;
  animation: infinite linear 2s cosmos;
  
}
.cosmos:first-child {
  background: radial-gradient(
    circle at 20% -10%,
    #ffffffff,
    #10d8ffff,
    #20c0ffff,
    #000000ff,
    #000000ff
  );
  animation-delay: -1s;
}
.cosmos:nth-child(2) {
  height: 0.6rem;
  width: 0.6rem;
  background: radial-gradient(
    circle at 20% -10%,
    #ffffffff,
    #d8c080ff,
    #c08000ff,
    #000000ff,
    #000000ff
  );
}

/** ANIMATIONS **/

@keyframes turn {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

@keyframes ball {
  0% {
    transform: translateX(-0.5rem) translateY(0.1rem);
  }
  25% {
    transform: translateX(0rem) translateY(-0.2rem);
  }
  50% {
    transform: translateX(0.5rem) translateY(0.1rem);
  }
  75% {
    transform: translateX(0rem) translateY(-0.2rem);
  }
  100% {
    transform: translateX(-0.5rem) translateY(0.1rem);
  }
}

@keyframes flip-flap {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes money {
  0% {
    transform: rotateY(0deg) rotatex(0deg);
  }
  50% {
    transform: rotateY(360deg) rotatex(90deg) translateZ(-0.5rem);
  }
  100% {
    transform: rotateY(720deg) rotatex(0deg);
  }
}

@keyframes zoom {
  0% {
    transform: scale(0);
    border-width: 0.3rem;
  }
  50% {
    border-color: #0080c0ff;
  }
  90% {
    transform: scale(1.1);
    border-color: transparent;
  }
  100% {
    border-color: transparent;
  }
}

@keyframes cosmos {
  from {
    transform: translateX(-0.8rem);
    z-index: 2;
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: translateX(0.8rem);
  }
  75% {
    transform: scale(0.8);
  }
  to {
    transform: translateX(-0.8rem);
    z-index: 1;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0.2rem);
  }
  30% {
    transform: translateY(-0.4rem);
  }
  60% {
    transform: translateY(0.2rem);
  }
  100% {
    transform: translateY(0.2rem);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0.2rem);
  }
  30% {
    transform: translateY(-0.4rem);
  }
  60% {
    transform: translateY(0.2rem);
  }
  100% {
    transform: translateY(0.2rem);
  }
}

@keyframes left-right {
  0% {
    transform: scale(0);
  }
  5% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    background-color: #0080c0ff;
  }
  60% {
    background-color: transparent;
  }
  90% {
    transform: scale(0);
    background-color: transparent;
  }
  100% {
    transform: scale(0);
    background-color: transparent;
  }
}