UNPKG

@synergy-design-system/components

Version:

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

75 lines (65 loc) 1.86 kB
// src/components/progress-ring/progress-ring.styles.ts import { css } from "lit"; var progress_ring_styles_default = css` /* stylelint-disable */ :host { --size: 128px; --track-width: 4px; --track-color: var(--syn-color-neutral-200); --indicator-width: var(--track-width); --indicator-color: var(--syn-color-primary-600); --indicator-transition-duration: 0.35s; display: inline-flex; } .progress-ring { display: inline-flex; align-items: center; justify-content: center; position: relative; } .progress-ring__image { width: var(--size); height: var(--size); rotate: -90deg; transform-origin: 50% 50%; } .progress-ring__track, .progress-ring__indicator { --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5); --circumference: calc(var(--radius) * 2 * 3.141592654); fill: none; r: var(--radius); cx: calc(var(--size) / 2); cy: calc(var(--size) / 2); } .progress-ring__track { stroke: var(--track-color); stroke-width: var(--track-width); } .progress-ring__indicator { stroke: var(--indicator-color); stroke-width: var(--indicator-width); stroke-linecap: round; transition-property: stroke-dashoffset; transition-duration: var(--indicator-transition-duration); stroke-dasharray: var(--circumference) var(--circumference); stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference)); } .progress-ring__label { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; user-select: none; -webkit-user-select: none; } `; export { progress_ring_styles_default }; //# sourceMappingURL=chunk.RMIDAEF5.js.map