.loader-wrapper {
    margin: 0 auto;
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

.loader {
    --border: 10px;
    --number: 10;
    --gap: 10deg;
    --color: red;

    width:100px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000,var(--color)) content-box;
    --mask: /* we use +/-1deg between colors to avoid jagged edges */
            repeating-conic-gradient(#0000 0deg,
            #000 1deg calc(360deg/var(--number) - var(--gap) - 1deg),
            #0000     calc(360deg/var(--number) - var(--gap)) calc(360deg/var(--number))),
            radial-gradient(farthest-side,#0000 calc(98% - var(--border)),#000 calc(100% - var(--border)));
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: load 1s infinite steps(var(--number));
}

@keyframes load {to{transform: rotate(1turn)}}