UNPKG

antd-mobile

Version:
52 lines (51 loc) 1.49 kB
/*进度圈*/ .adm-progress-circle { --track-width: var(--adm-progress-circle-track-width, 3px); --size: var(--adm-progress-circle-size, 50px); --track-color: var(--adm-progress-circle-track-color, var(--adm-color-border)); --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary)); --percent: 0; --pi: 3.14159265; --radius: calc(var(--size) / 2 - var(--track-width) / 2); --circumference: calc(var(--radius) * var(--pi) * 2); display: inline-block; width: var(--size); height: var(--size); } .adm-progress-circle-svg { width: 100%; height: 100%; } .adm-progress-circle-svg > .adm-progress-circle-track, .adm-progress-circle-svg .adm-progress-circle-fill { stroke-width: var(--track-width); r: var(--radius); cx: calc(var(--size) / 2); cy: calc(var(--size) / 2); transform: rotate(-90deg); transform-origin: 50% 50%; } .adm-progress-circle-svg > .adm-progress-circle-track { stroke: var(--track-color); } .adm-progress-circle-svg > .adm-progress-circle-fill { transition: stroke-dashoffset 0.35s; stroke: var(--fill-color); stroke-dasharray: var(--circumference); stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100)); stroke-linecap: round; } .adm-progress-circle-content { position: relative; margin: auto; width: 100%; height: 100%; } .adm-progress-circle-info { position: absolute; width: 100%; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); }