Loading indicator
A CSS-only indicator for the rare slow navigation – debounced so instant ones never flash.
You rarely need one – preloaded navigation is instant. An
indicator only shows on the genuinely slow case: an uncached page
on a slow connection. While a navigation is in flight past a
debounce, Sparke sets
<html data-sparke-loading>, so a CSS-only
indicator works with zero JS.
A CSS-only bar
#progress {
/* a fixed top bar, outside <main> so it survives swaps */
}
html[data-sparke-loading] #progress {
transform: scaleX(0.8);
}
/* optionally dim controls so a link cannot be hammered */
html[data-sparke-loading] a {
pointer-events: none;
opacity: 0.6;
}
Put your indicator outside
<main> so it isn't replaced during a swap.
This very site uses exactly this pattern – the thin bar at the
top.
The debounce
The loading state is debounced (default 150 ms) so instant
navigations never flash a spinner. Tune it with
data-loading-delay on the script tag (0
= immediate):
<script src="sparke.min.js" defer data-loading-delay="250"></script>
For richer behaviour, listen for the
sparke:loading event –
e.detail.active is
true/false.