WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): localize progress and loading styles

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 13:42:09 +05:30
parent fdf6282aed
commit b6bd5cfcb7
6 changed files with 151 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/spinner.wrn
+37 -2
View File
@@ -7,8 +7,43 @@ component Spinner {
class: string = ""
}
view {
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--spinner wire-next--size-{size} {class}" role="status" aria-label="{label}">
{#if "Spinner" === "Skeleton"}{#each Array(lines).fill(0) as line}<span></span>{/each}{:else}<i aria-hidden="true"></i>{/if}
<div class="wire-spinner-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
<i class="wire-spinner-component__indicator" aria-hidden="true"></i>
</div>
}
style {
.wire-spinner-component {
--wire-spinner-size: 1.5rem;
--wire-spinner-color: var(--wire-color-primary);
display: inline-grid;
place-items: center;
}
.wire-spinner-component[data-size="xs"] { --wire-spinner-size: 0.875rem; }
.wire-spinner-component[data-size="sm"] { --wire-spinner-size: 1.125rem; }
.wire-spinner-component[data-size="lg"] { --wire-spinner-size: 2rem; }
.wire-spinner-component[data-size="xl"] { --wire-spinner-size: 2.5rem; }
.wire-spinner-component[data-color="secondary"] { --wire-spinner-color: var(--wire-color-secondary); }
.wire-spinner-component[data-color="success"] { --wire-spinner-color: var(--wire-color-success); }
.wire-spinner-component[data-color="warning"] { --wire-spinner-color: var(--wire-color-warning); }
.wire-spinner-component[data-color="danger"] { --wire-spinner-color: var(--wire-color-danger); }
.wire-spinner-component[data-color="info"] { --wire-spinner-color: var(--wire-color-info); }
.wire-spinner-component__indicator {
display: block;
width: var(--wire-spinner-size);
height: var(--wire-spinner-size);
border: 2px solid var(--wire-color-border);
border-top-color: var(--wire-spinner-color);
border-radius: 50%;
animation: wire-spinner-component-spin 700ms linear infinite;
}
@keyframes wire-spinner-component-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.wire-spinner-component__indicator { animation-duration: 1.8s; }
}
}
}