cloud-ui.vusion/src/u-circular-progress.vue/index.html

Vusion Cloud UI

<div :class="$style.root">
    <svg :class="$style.svg" viewBox="0 0 100 100">
        <g transform="translate(50, 50) rotate(90)">
            <circle :class="$style.track" cx="0" cy="0" :r="radius" />
            <circle :class="$style.trail" cx="0" cy="0" :r="radius" :linecap="percent === 0" :style="{ strokeDasharray, stroke  }" />
        </g>
    </svg>
    <div :class="$style.text">
        <div :class="$style.wrap">
            <div :class="$style.percent">{{ percent + '%' }}</div>
            <div :class="$style.self">
                <slot :class="$style.self"></slot>
            </div>
        </div>
    </div>
    <div :class="$style.footer">
        <slot name="title"></slot>
    </div>
</div>