html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

div {

    width: 200px;

    height: 100px;

    margin: auto;

    // border: 1px solid #000;

}

​

.normal {

    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);

}

​

.acute {

    background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);

}

​

.demo {

    position: relative;

    border: 1px solid #000;

    background: unset;

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        animation: conicmove 6s infinite linear;

        z-index: -1;

    }

}

​

@keyframes conicmove {

    @for $i from 0 to 45 {

        #{$i * 2}% {

            background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink #{$i * 4.2}deg, transparent #{$i * 4.2 + 0.2}deg, transparent 1deg);

        }

        100% {

            background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.2deg);

        }

    }

}