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

fixes #633

Browse Source
This commit is contained in:
Cory LaViska
2021-12-27 12:40:30 -05:00
parent 316087d18c
commit 707bfb9c78
3 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/spinner/spinner.styles.ts
View File

@@ -34,16 +34,13 @@ export default css`
.spinner__track {
stroke: var(--track-color);
transform-origin: 0% 0%;
mix-blend-mode: multiply;
}
.spinner__indicator {
stroke: var(--indicator-color);
stroke-linecap: round;
/* stroke-dasharray: (2πr x p), (2πr) where p is the percentage to display */
stroke-dasharray: calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2) * 0.75),
calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2));
transform-origin: 50% 50%;
transform: rotate(90deg);
stroke-dasharray: 150% 75%;
animation: spin var(--speed) linear infinite;
}

2
src/components/spinner/spinner.ts
View File

@@ -19,7 +19,7 @@ export default class SlSpinner extends LitElement {
render() {
return html`
<svg part="base" class="spinner" aria-busy="true" aria-live="polite">
<svg part="base" class="spinner" role="status">
<circle class="spinner__track"></circle>
<circle class="spinner__indicator"></circle>
</svg>