음악, 삶, 개발

선거 개표 UI 중 knob 모양 코드 본문

개발 Web/HTML & CSS

선거 개표 UI 중 knob 모양 코드

Lee_____ 2022. 3. 10. 03:40

<div class="graph_doughnut"> 
    <svg width="66" height="66"> 
    <defs> 
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> 
            <stop offset="0%" stop-color="#9835ff"></stop>
            <stop offset="100%" stop-color="#3247e8"></stop>
        </linearGradient> 
    </defs>
        <circle 
            cx="33" 
            cy="33" 
            r="26" 
            stroke="#e4e7ff" 
            stroke-width="13" 
            fill="transparent">
        </circle> 
        <style>

                .hKyboreDxG {
                    stroke-dasharray: 163.36281798666926;
                    stroke-dashoffset: 163.36281798666926;
                    animation: lfbdzKOhoa 0.5s linear forwards;
                }

                @keyframes lfbdzKOhoa {
                    to {
                        stroke-dashoffset: 7.694388727172109;
                    }
                }

        </style>
        <circle 
            id="path" 
            class="donut_chart _donut_chart hKyboreDxG" 
            cx="33" 
            cy="33" 
            r="26" 
            data-value="95.29" 
            stroke-linecap="round" 
            stroke-width="13" 
            fill="transparent" 
            transform="rotate(-90 33,33)" 
            stroke="url(#linear)"
        ></circle>
    </svg>
</div>