js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add transition duration custom prop

Browse Source
This commit is contained in:
Cory LaViska
2022-10-28 09:57:41 -04:00
parent 55445a80a3
commit ab754e9409
3 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/progress-ring/progress-ring.styles.ts
View File

@@ -10,6 +10,7 @@ export default css`
--track-color: var(--sl-color-neutral-200);
--indicator-width: var(--track-width);
--indicator-color: var(--sl-color-primary-600);
--indicator-transition-duration: 0.35s;
display: inline-flex;
}
@@ -48,7 +49,8 @@ export default css`
stroke: var(--indicator-color);
stroke-width: var(--indicator-width);
stroke-linecap: round;
transition: 0.35s stroke-dashoffset;
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));
}

1
src/components/progress-ring/progress-ring.ts
View File

@@ -21,6 +21,7 @@ import type { CSSResultGroup } from 'lit';
* @cssproperty --track-color - The color of the track.
* @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
* @cssproperty --indicator-color - The indicator color.
* @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
*/
@customElement('sl-progress-ring')
export default class SlProgressRing extends ShoelaceElement {