Spin
Ladeanzeigen, wie die Spin-Komponente, informieren die Nutzer:innen über Lade- oder Rechenvorgänge, die vom System ausgeführt werden. Der Fortschritt kann durch eine wiederholte Animation kommuniziert werden.
Konstruktion
Code
<style>
/* https://github.com/vineethtrv/css-loader */
.loader {
animation: rotation 2s linear infinite;
border-color: #444;
border-radius: 50%;
border-style: solid solid dotted dotted;
border-width: 3px;
box-sizing: border-box;
display: inline-block;
height: 48px;
position: relative;
width: 48px;
}
.loader::after {
animation: rotationBack 1s linear infinite;
border-color: #ff3d00;
border-radius: 50%;
border-style: solid solid dotted;
border-width: 3px;
box-sizing: border-box;
bottom: 0;
content: '';
height: 24px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
transform-origin: center center;
width: 24px;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
.loader {
animation-duration: 6s;
}
.loader::after {
animation-duration: 3s;
}
}
</style>
<div>
<kol-spin _show></kol-spin>
<kol-spin _show _variant="cycle"></kol-spin>
<!-- for a11y experts - own animation -->
<kol-spin _show _variant="none">
<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
<span className="loader" slot="expert"></span>
</kol-spin>
</div>
Beispiel
Verwendung
Verwenden Sie das Attribut _show
um festzulegen, ob der Spin angezeigt wird.
Best practices
- Verwenden Sie Ladeanzeigen, um die Nutzer:innen über einen Ladezustand oder einen laufenden Prozess zu informieren.
- Verwenden Sie Ladeanzeigen an konsistenten Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
Anwendungsfälle
- Abrufen neuer oder aktualisierter Suchergebnisse.
- Einloggen in geschützte Bereiche.
- Download von Inhalten.
- Laden von umfangreichen Inhalten, z.B. Videos.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_show | _show | Makes the element show up. | boolean | undefined | false |
_variant | _variant | Defines which variant should be used for presentation. | "cycle" | "dot" | "none" | undefined | 'dot' |