<div class="bg">
    <div class="point"></div>
</div>
body {
    background: #fff;
}

.bg {
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(
        #f1462c 0%,
        #fc5d2c 12.4%,
        #fff 12.5%,
        #fff 12.5%,
        #fc5d2c 12.5%,
        #fba73e 24.9%,
        #fff 24.9%,
        #fff 25%,
        #fba73e 25%,
        #e0fa4e 37.4%,
        #fff 37.4%,
        #fff 37.5%,
        #e0fa4e 37.5%,
        #12dd7e 49.9%,
        #fff 49.9%,
        #fff 50%,
        #12dd7e 50%,
        #0a6e3f 62.4%,
        #fff 62.4%,
        #fff 62.5%
    );
    transform: rotate(-112.5deg);
    transform-origin: 50% 50%;
}

.bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
}

.bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
            #fff 0%,
            #fff 25%,
            transparent 25%,
            transparent 100%
        ),
        conic-gradient(
            #f1462c 0 12.5%,
            #fba73e 0 25%,
            #e0fa4e 0 37.5%,
            #12dd7e 0 50%,
            #0a6e3f 0 62.5%,
            #fff 0 100%
        );
}

.point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
}

.point::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(
        180deg,
        #9bc7f6 0,
        #467dc6 50%,
        transparent 50%,
        transparent 100%
    );
    animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}

@keyframes rotate {
    50% {
        transform: translate(-50%, -50%) rotate(150deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(150deg);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
  2. //leaverou.github.io/conic-gradient/conic-gradient.js