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>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.
The width of the spinner’s track can be changed by setting the --track-width custom property.
The spinner’s colours can be changed by setting the --indicator-color and --track-color custom properties.
| 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.
| Name | Beschreibung |
|---|---|
base | The component’s base wrapper. |
Erfahre mehr über das Anpassen von CSS‐Parts.
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, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
<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, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/spinner/spinner.js";Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "placer-toolkit/dist/components/spinner/spinner.js";