.spinner-block {
  margin: 0 auto;
  width: 105px;
  height: 105px;
  position: relative;
}
.spinner-block::before {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  bottom: 13px;
  left: 11px;
}

.spinner-block__svg {
  stroke-dasharray: 300;
  stroke-dashoffset: 300%;
  transition: all 0.8s ease-in-out;
  transform: rotate(-90deg);
}

.spinner-block.animate .spinner-block__svg {
  animation: offset 5s ease-in-out forwards;
}

.spinner-block__counter,
.spinner-block__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner-block__counter {
  color: #000;
  font-size: 1.125rem;
}
.spinner-block__icon {
  display: none;
}
.spinner-block__icon .icon {
  fill: var(--color-primary);
  font-size: 1.4375rem;
}