<div class='wrapper'>
    <div class='loader'></div>
</div>

body {
    background: #3f403f;
}

.wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

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

.loader {
    position: relative;
    height: 150px;
    width: 150px;
    background: radial-gradient(circle, #6a558e 0%, #6a558e 70%, transparent 71%, transparent 100%),
                linear-gradient(to right, #3f403f 0%, #3f403f 100%),
                radial-gradient(circle, #3f403f 0%, #3f403f 60%, transparent 61%, transparent 100%),
                radial-gradient(circle, transparent 0%, transparent 70%, #3f403f 71%, #3f403f 100%),
                linear-gradient(-35deg, #6a558e 0%, #6a558e 10%, transparent 75%, transparent 100%),
                linear-gradient(to top, #6a558e 0%, #6a558e 10%, transparent 70%, transparent 100%);
    background-position: 50% 100%,
                         0% 0%,
                         50% 50%,
                         50% 50%,
                         0% 0%,
                         0% 0%;
    background-size: 7% 7%,
                     50% 100%,
                     100% 100%,
                     100% 100%,
                     100% 100%,
                     100% 100%;
    background-repeat: no-repeat;
    animation: load 1s linear infinite;
}