This loading spinner I have created doesn't show the delay function at the moment I hover on the element, but it rotates a full turn before creating the animation on the second turn; how could I debug this issue?

Kindly, check my codepen code link so you can get what I mean, thank you.

[Codepen](https://codepen.io/almuhannahanani/pen/abGWRby)

Each border of spin pseudo elements must move at different timing from the beginning when I hover on the element, I have set the animation delay function, and it works properly but not at the first turn.

This is how I wrote the code:

```css
.spin {
  margin: auto;
  margin-top: 23px;
  margin-bottom: 23px;
}

.spin div {
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid #2196f3;
  border-bottom-color: transparent;
  position: relative;
  animation-name: spinning;
  animation-duration: 1s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid orange;
  border-bottom-color: transparent;
  scale: 1.2;
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
}

.spin div::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom-color: transparent;
  scale: 1.4;
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div:hover {
  animation-play-state: running;
}

.spin div:hover::before {
  animation-play-state: running;
}

.spin div:hover::after {
  animation-play-state: running;
}

@keyframes spinning {
  100% {
    transform: rotate(1turn)
  }
}
```

```html
<div class="spin">
  <div></div>
</div>
```