Loader com HTML e CSS puros!

Achei super bacana a iniciativa do projeto! Totalmente apoiado!
Como meu primeiro post, vou fornecer o código de um loader real que eu fiz e é utilizado em uma das aplicações aqui da empresa onde trabalho!

HTML

<div class="page-loader">
  <div class="anim">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

.page-loader {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(255, 255, 255);
  z-index: 100;
}

.anim {
  display: flex;
  justify-content: center;
  align-items: center;
}

.anim div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0px 5px;
  animation: anim 2s infinite cubic-bezier(.48, .06, .44, .82);
}

.anim div:nth-child(1) {
  animation-delay: 0s;
  background-color: rgb(190, 196, 255);
}

.anim div:nth-child(2) {
  animation-delay: .15s;
  background-color: rgb(138, 149, 255);
}

.anim div:nth-child(3) {
  animation-delay: .3s;
  background-color: rgb(92, 108, 255);
}

.anim div:nth-child(4) {
  animation-delay: .45s;
  background-color: rgb(53, 73, 255);
}

@keyframes anim {
  0% {
    transform: translateY(0px);
  }

  45% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

É literalmente copiar e colar, e o loader estará prontinho!
Esse é um loader que cobre a tela inteira, que você pode usar em situações onde o usuário muda de página mas as informações da página nova ainda não foram totalmente carregadas.

Porém, é possível retirar esse plano de fundo que cobre a tela toda e usar somente a parte da animação de forma separada, se você preferir!

Também é possível aumentar ou diminuir o tamanho dos círculos através da width e heigth nesse trecho de código:

.anim div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0px 5px;
  animation: anim 2s infinite cubic-bezier(.48, .06, .44, .82);
}

Você também pode mudar as cores de acordo com sua preferência, de todos os círculos ou de cada um individualmente, como eu fiz. Basta apenas alterar o background-color de cada div.

Espero muito que isso seja útil para alguém!