How to create spinning animation in CSS?

Question

I have a drag and drop function and I would like to extend it with adding borders to areas where an item can be dropped.

I added an animation to this border which resembles a precentage spinner.

How it works:

Adding the "spin" class to an item triggers the animation which is working as expected.

CSS:

button {
    border: 0;
    position: relative;
}

button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin {
    height: 200px;
    width: 200px;
}

.spin::before,
.spin::after {
    top: 0;
    left: 0;
}

.spin::before {
    border: 2px solid transparent;
}

.spin::before {
    border-top-color: #0eb7da;
    border-right-color: #0eb7da;
    border-bottom-color: #0eb7da;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;
}

.spin::after {
    border: 0 solid transparent;
}

.spin::after {
    border-top: 2px solid #0eb7da;
    border-left-width: 2px;
    border-right-width: 2px;
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
        height: 200px;
    width: 200px;
}

.circle::before,
.circle::after {
    border-radius: 100%;
}

HTML:

   <button class="spin circle">Spin Circle</button>

Fiddle here

What I can not figure out:

How can I make this animation continuously spin via css?