*, *:before, *:after {
    box-sizing: border-box;
    position: relative;
}

svg {
    display: block;
    margin: 0;
    padding: 0;
}

/*html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #F8F1DE;
    }*/

.spinner {
    width: 40px;
    height: 40px;
    animation: contanim 2s linear infinite;
    display: inline-block;
    position: center;
}

svg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    /*transform: rotate(-90deg);*/
}

    svg:nth-child(1) circle {
        stroke: #c11a61;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (1)) ease infinite;
        transform-origin: center center;
    }

    svg:nth-child(2) circle {
        stroke: #f39712;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (2)) ease infinite;
        transform-origin: center center;
    }

    svg:nth-child(3) circle {
        stroke: #0070a3;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (3)) ease infinite;
        transform-origin: center center;
    }

    svg:nth-child(4) circle {
        stroke: #718f22;
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
        animation: strokeanim 3s calc(.2s * (4)) ease infinite;
        transform-origin: center center;
    }

@keyframes strokeanim {
    0% {
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -58.548324585;
    }

    100% {
        stroke-dasharray: 120, 300;
        stroke-dashoffset: -175.6449737549;
    }
}

@keyframes contanim {
    100% {
        transform: rotate(360deg);
    }
}