dd_spinner {
  --color: #232b37;
  --size: 50px;
  --thickness: 6px;
  display: inline-block;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
}

dd_spinner:not(.timer)::after {
  content: " ";
  box-sizing: border-box;
  display: block;
  width: var(--size));
  height: var(--size);
  border-radius: 50%;
  border: var(--thickness) solid var(--color);
  border-color: var(--color) transparent var(--color) transparent;
  animation: dd_spinner_animation 1.2s linear infinite;
}

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

dd_spinner.timer {
    --radius: 36px;
    --thickness: 5px;
    --seconds: 6s;
    --color: #232b37;
    --stroke-dasharray: calc(2 * 3.1415 * var(--radius));
    --size: calc(2 * var(--radius) + var(--thickness));
    position: relative;
}

dd_spinner.timer svg {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--size);
  height: var(--size);
  transform: rotateZ(-90deg);
}

dd_spinner.timer svg circle {
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: var(--thickness, 2px);
  stroke: var(--color, black);
  
  r: var(--radius);
  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  fill: none;
  animation: dd_spinner_timer var(--seconds) linear forwards;
}

@keyframes dd_spinner_timer {
  to {
    stroke-dashoffset: 0px;
  }
  
  from {
    stroke-dashoffset: var(--stroke-dasharray);
  }
}