Spinner
<pc-spinner> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Spinners are used to show the progress of an indeterminate operation.
<pc-spinner></pc-spinner>Demos#
Size#
Spinners are sized based on the current font size. To change the size, set the font-size property on the spinner itself or on a parent element.
Track width#
The width of the spinner’s track can be changed by setting the --track-width custom property.
Colour#
The spinner’s colours can be changed by setting the --indicator-color and --track-color custom properties.
Benutzerdefinierte Eigenschaften#
| Name | Beschreibung | Standard |
|---|---|---|
--track-width | The width of the track. | 0.125rem |
--track-color | The colour of the track. | var(--pc-color-neutral-fill-normal) |
--indicator-color | The colour of the spinner’s indicator. | var(--pc-color-primary-fill-loud) |
--speed | The time it takes for the spinner to complete one animation cycle. | 2s |
Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.
Parts#
| Name | Beschreibung |
|---|---|
base | The component’s base wrapper. |
Erfahre mehr über das Anpassen von CSS‐Parts.
Importieren#
Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/spinner/spinner.js"></script>Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/spinner/spinner.js";Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "placer-toolkit/dist/components/spinner/spinner.js";