kopia lustrzana https://github.com/shoelace-style/shoelace
improve spinner animation and API
rodzic
7e6c6924f2
commit
e1f129abc5
|
@ -12,7 +12,7 @@ Spinners are used to show the progress of an indeterminate operation.
|
|||
|
||||
### Size
|
||||
|
||||
Spinners are sized relative to the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
|
||||
Spinners are sized based on the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
|
||||
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
|
@ -20,12 +20,12 @@ Spinners are sized relative to the current font size. To change their size, set
|
|||
<sl-spinner style="font-size: 3rem;"></sl-spinner>
|
||||
```
|
||||
|
||||
### Stroke Width
|
||||
### Track Width
|
||||
|
||||
The width of the spinner can be changed by setting the `--stroke-width` custom property.
|
||||
The width of the spinner's track can be changed by setting the `--track-width` custom property.
|
||||
|
||||
```html preview
|
||||
<sl-spinner style="font-size: 2rem; --stroke-width: 6px;"></sl-spinner>
|
||||
<sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
|
||||
```
|
||||
|
||||
### Color
|
||||
|
@ -33,7 +33,7 @@ The width of the spinner can be changed by setting the `--stroke-width` custom p
|
|||
The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
|
||||
|
||||
```html preview
|
||||
<sl-spinner style="font-size: 2rem; --indicator-color: tomato;"></sl-spinner>
|
||||
<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
|
||||
```
|
||||
|
||||
[component-metadata:sl-spinner]
|
||||
|
|
|
@ -8,7 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: removed `--stroke-width` from `<sl-spinner>` (use `--track-width` instead)
|
||||
- Added `--speed` CSS custom property to `<sl-spinner>`
|
||||
- Fixed a bug where `<sl-tab>` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
|
||||
- Updated `<sl-spinner>` to use an SVG and improved the indicator animation
|
||||
|
||||
## 2.0.0-beta.51
|
||||
|
||||
|
|
|
@ -5,9 +5,10 @@ export default css`
|
|||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--track-width: 2px;
|
||||
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
|
||||
--indicator-color: rgb(var(--sl-color-primary-600));
|
||||
--stroke-width: 2px;
|
||||
--speed: 2.5s;
|
||||
|
||||
display: inline-flex;
|
||||
width: 1em;
|
||||
|
@ -16,19 +17,47 @@ export default css`
|
|||
|
||||
.spinner {
|
||||
flex: 1 1 auto;
|
||||
border-radius: 50%;
|
||||
border: solid var(--stroke-width) var(--track-color);
|
||||
border-top-color: var(--indicator-color);
|
||||
border-right-color: var(--indicator-color);
|
||||
animation: 1s linear infinite spin;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spinner__track,
|
||||
.spinner__indicator {
|
||||
fill: none;
|
||||
stroke-width: var(--track-width);
|
||||
r: calc(0.5em - var(--track-width) / 2);
|
||||
cx: 0.5em;
|
||||
cy: 0.5em;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.spinner__track {
|
||||
stroke: var(--track-color);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.spinner__indicator {
|
||||
stroke: var(--indicator-color);
|
||||
stroke-linecap: round;
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(90deg);
|
||||
animation: spin var(--speed) linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
stroke-dasharray: 0.2em 3em;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 2.2em 3em;
|
||||
transform: rotate(450deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
stroke-dasharray: 0.2em 3em;
|
||||
transform: rotate(1080deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -8,16 +8,22 @@ import styles from './spinner.styles';
|
|||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --track-width - The width of the indicator.
|
||||
* @cssproperty --track-color - The color of the spinner's track.
|
||||
* @cssproperty --indicator-color - The color of the spinner's indicator.
|
||||
* @cssproperty --stroke-width - The width of the indicator.
|
||||
* @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
|
||||
*/
|
||||
@customElement('sl-spinner')
|
||||
export default class SlSpinner extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
render() {
|
||||
return html` <span part="base" class="spinner" aria-busy="true" aria-live="polite"></span> `;
|
||||
return html`
|
||||
<svg part="base" class="spinner" aria-busy="true" aria-live="polite">
|
||||
<circle class="spinner__track"></circle>
|
||||
<circle class="spinner__indicator"></circle>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue