Basic CSS Loader

css-loader.html

<div class="loader"></div>
<style>
  .loader {
    --size: 5rem;
    --weight: .5rem;
    --background: rgba(127, 127, 127, .1);
    --color: rgba(127, 127, 127, .9);
    --duration: 1s;
    position: fixed;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    border: solid var(--weight) var(--background);
    border-top-color: var(--color);
    border-radius: 50%;
    animation: loader var(--duration) linear infinite;
  }

  @keyframes loader {
    to {
      transform: rotate(360deg);
    }
  }
</style>