noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the loading indicator without Tailwind

Browse Source 
Plan step 36. <x-loading> renders data-md-loading and data-md-contained,
and loading.css in material.components draws the 48px indicator in
primary, the contained circle and the still shape under reduced motion.
The view no longer reads the caller's classes to decide its size and
colour: a caller's utility outranks the package's layer on its own.

ActionStylesheetsTest checks the group's stylesheets for the package's
shape (layer statement, plain imports, material.components, tokens, px
breakpoints, imports of rendered components) and its views for class
lists; tests/Support/ComponentStylesheet reads a rule's declarations.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:10:16 +02:00
co-authored by Claude Opus 5
parent d7653aa6d0
commit 6c7414d60e
6 changed files with 476 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/loading.blade.php
+15 -21
View File
@@ -1,16 +1,17 @@
{{-- M3 Expressive's loading indicator: a shape that morphs through seven Expressive shapes while
it turns, for a wait that has no known length.
In the text colour — primary unless the caller colours it — and 48px unless sized. `contained`
puts it on a primary-container circle, for a spinner over content. It is a `progressbar`
named `label` ("Loading" by default); pass `:label="false"` where something else already
says what is happening, as a button's own spinner does.
In the text colour — primary unless the caller colours it — and 48px unless the caller's CSS
sizes it. `contained` puts it on a primary-container circle, for a spinner over content. It
is a `progressbar` named `label` ("Loading" by default); pass `:label="false"` where something
else already says what is happening, as a button's own spinner does.
Pure SVG with SMIL, so it animates in every engine without script. Under
`prefers-reduced-motion` the shape rests. The geometry is androidx Compose Material 3's
LoadingIndicator and Morph, ported in bin/loading-indicator.mjs (Apache-2.0):
LoadingIndicatorTokens' 38px indicator in a 48px container, a morph every 650ms on a spring,
a quarter turn per morph and a full turn every 4666ms. --}}
a quarter turn per morph and a full turn every 4666ms. Drawn by
resources/css/components/loading.css. --}}
@props([
'contained' => false,
@@ -18,26 +19,19 @@
])
@php
$sized = preg_match('/(^|\s)(size|w|h)-/', (string) $attributes->get('class')) === 1;
$coloured = preg_match('/(^|\s)text-(?!(xs|sm|base|lg|xl|[2-9]xl|left|center|right|start|end)(\s|$))/', (string) $attributes->get('class')) === 1;
$decorative = $label === false;
$label = $decorative ? null : ($label ?? __('Loading'));
$attributes = $attributes
->class([
'inline-flex shrink-0 items-center justify-center',
'size-12' => ! $sized,
'rounded-corner-full bg-primary-container text-on-primary-container' => $contained,
'text-primary' => ! $contained && ! $coloured,
])
->merge(array_filter([
'role' => $decorative ? null : 'progressbar',
'aria-label' => $label,
'aria-hidden' => $decorative ? 'true' : null,
]));
$attributes = $attributes->merge(array_filter([
'data-md-loading' => true,
'data-md-contained' => $contained ? true : null,
'role' => $decorative ? null : 'progressbar',
'aria-label' => $label,
'aria-hidden' => $decorative ? 'true' : null,
], fn ($value): bool => $value !== null));
@endphp
<span {{ $attributes }}>
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(true, new \Illuminate\View\ComponentAttributeBag(['class' => 'size-full motion-reduce:hidden', 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(false, new \Illuminate\View\ComponentAttributeBag(['class' => 'hidden size-full motion-reduce:block', 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(true, new \Illuminate\View\ComponentAttributeBag(['data-md-loading-animated' => true, 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(false, new \Illuminate\View\ComponentAttributeBag(['data-md-loading-still' => true, 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
</span>