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

Make color customizable

Browse Source
This commit is contained in:
Cory LaViska
2020-07-14 15:53:43 -04:00
parent f00ba96893
commit 4c2e5d6795
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/components/progress-ring.md
View File

@@ -5,7 +5,7 @@
Progress rings are used to show the progress of a determinate operation in a circular fashion.
```html preview
<sl-progress-ring percentage="50"></sl-progress-ring><br>
<sl-progress-ring percentage="50"></sl-progress-ring>
```
## Examples
@@ -15,7 +15,7 @@ Progress rings are used to show the progress of a determinate operation in a cir
Use the `size` attribute to set the diameter of the progress ring.
```html preview
<sl-progress-ring percentage="50" size="200"></sl-progress-ring><br>
<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
```
### Stroke Width
@@ -23,7 +23,18 @@ Use the `size` attribute to set the diameter of the progress ring.
Use the `stroke-width` attribute to set the width of the progress ring's indicator.
```html preview
<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring><br>
<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
```
### Colors
To change the color, use the `--track-color` and `--indicator-color` custom properties.
```html preview
<sl-progress-ring
percentage="50"
style="--track-color: #ffe2c6; --indicator-color: tomato;"
></sl-progress-ring>
```
### Labels

11
src/components/progress-ring/progress-ring.scss
View File

@@ -1,7 +1,14 @@
@import 'component';
/**
* @prop --track-color: The track color.
* @prop --indicator-color: The indicator color.
*/
:host {
display: inline-flex;
--track-color: var(--sl-color-gray-90);
--indicator-color: var(--sl-color-primary-50);
}
.progress-ring {
@@ -12,11 +19,11 @@
}
.progress-ring__track {
stroke: var(--sl-color-gray-90);
stroke: var(--track-color);
}
.progress-ring__indicator {
stroke: var(--sl-color-primary-50);
stroke: var(--indicator-color);
transition: 0.35s stroke-dashoffset, 0.35s stroke;
transform: rotate(-90deg);
transform-origin: 50% 50%;