Пример кода<div class="loader">
    <svg class="loader__svg" viewBox="25 25 50 50">
        <circle class="loader__svg-circle" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
    </svg>
</div>
<style>
    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 110px;
        height: 110px;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }
    .loader__svg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
    .loader__svg-circle {
        stroke: #bfc3c8;
        stroke-width: 1.5;
        stroke-dasharray: 20,200;
        stroke-dashoffset: 0;
        -webkit-animation: dash 1.5s ease-in-out infinite;
        animation: dash 1.5s ease-in-out infinite;
        stroke-linecap: round
    }
    @-webkit-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    @keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    @-webkit-keyframes dash {
        0% {
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0
        }
        50% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35px
        }
        100% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124px
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0
        }
        50% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35px
        }
        100% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124px
        }
    }
</style>