.radar-spinner, .radar-spinner * {
    box-sizing: border-box;
}

.radar-spinner {
    height: 60px;
    width: 60px;
    position: relative;
}

.radar-spinner .circle {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: radar-spinner-animation 2s infinite;
}

.radar-spinner .circle:nth-child(1) {
    padding: calc(60px * 5 * 2 * 0 / 110);
    animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(2) {
    padding: calc(60px * 5 * 2 * 1 / 110);
    animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(3) {
    padding: calc(60px * 5 * 2 * 2 / 110);
    animation-delay: 300ms;
}

.radar-spinner .circle:nth-child(4) {
    padding: calc(60px * 5 * 2 * 3 / 110);
    animation-delay: 0ms;
}

.radar-spinner .circle-inner, .radar-spinner .circle-inner-container {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: calc(60px * 5 / 110) solid transparent;
}

.radar-spinner .circle-inner {
    border-left-color: var(--secondary, #ff1d5e);
    border-right-color: var(--secondary, #ff1d5e);
}

@keyframes radar-spinner-animation {
    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}