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);

    }

}

​