Mantine Spinner v4.1 — responsive size with zero React re-renders
M
antine Spinner is an SVG-based loading spinner for Mantine 9 with customizable segments, multiple animation variants, segment shapes (line, dot, arc), gradient colors, glow, hue rotate, and a determinate progress mode.
In v4.1 the size prop becomes responsive in the Mantine-native way. Pass a breakpoint object and the spinner scales via CSS media queries — zero React re-renders, no custom hooks, no JavaScript on resize.
Highlights:
• size accepts Mantine breakpoint objects: { base: 'sm', sm: 'md', md: 'lg', lg: 'xl', xl: 100 }. Scalar values keep working unchanged.
• Internal SVG geometry is computed at the base breakpoint; CSS scales the rendered dimensions through the new --spinner-size variable. Stroke proportions stay visually correct at every breakpoint because the entire SVG scales as a unit.
• New --spinner-size Styles API variable on the root selector for direct overrides via vars or external CSS.
• Bug fix: non-pixel size strings like "50%" or "100vw" no longer break the SVG with NaN coordinates. Geometry falls back to the default while CSS keeps the original value.
• Drop-in upgrade. No migration, no breaking changes.
Install: npm install @gfazioli/mantine-spinner@4
Replies