@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader,
.loader *,
.loader *::before,
.loader *::after {
  box-sizing: border-box;
}

.loader {
  --size: 60px;
  --border: 0.04em;
  --dot-size: 0.23em;
  --dot-color: #2f7b98;
  --easing: cubic-bezier(0.74, 0.17, 0.29, 0.82);

  position: relative;
  display: inline-block;

  /* for relative size inside the loader */
  font-size: var(--size);
  width: 1em;
  height: 1em;

  /* for smoother animations */
  transform: translateZ(0);

  color: inherit;
}

.loader__circle {
  --calculated-position: calc(var(--dot-size) / 2 - var(--border));

  position: absolute;
  border-radius: 50%;
  top: var(--calculated-position);
  left: var(--calculated-position);
  height: calc(100% - var(--dot-size) + var(--border) * 2);
  width: calc(100% - var(--dot-size) + var(--border) * 2);
  border: var(--border) solid currentColor;
  opacity: 0.16;
}

.loader__dot {
  --background: var(--dot-color);

  position: absolute;
  top: 0;
  left: calc(50% - var(--dot-size) / 2);
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--background);
  border-radius: 50%;

  /* let's animate it */
  animation: spin 1s infinite var(--easing);
  transform-origin: 50% 0.5em;
}