Spinner
AtomCSS border-based loading indicator. Does not require FontAwesome. 5 sizes, border-border / border-t-primary colour system.
<%- include('modules/ui/Spinner', { size: 'xs' }) %>
<%- include('modules/ui/Spinner', { size: 'sm' }) %>
<%- include('modules/ui/Spinner', { size: 'md' }) %>
<%- include('modules/ui/Spinner', { size: 'lg' }) %>
<%- include('modules/ui/Spinner', { size: 'xl' }) %><%- include('modules/ui/Button', { variant: 'primary', loading: true, children: 'Saving…' }) %>
<%- include('modules/ui/Button', { variant: 'outline', loading: true, children: 'Loading details' }) %><%
var _sz = locals.size || 'md';
var sc = {
xs: 'h-3 w-3 border',
sm: 'h-4 w-4 border-2',
md: 'h-6 w-6 border-2',
lg: 'h-8 w-8 border-[3px]',
xl: 'h-12 w-12 border-4',
}[_sz] || 'h-6 w-6 border-2';
%>
Loading…