Spinner

Atom

CSS border tabanlı yükleme göstergesi. FontAwesome gerektirmez. 5 boyut, border-border / border-t-primary renk sistemi.

Sizes

Preview

Code

<%- 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' }) %>

In a Button

Preview

Code

<%- include('modules/ui/Button', { variant: 'primary', loading: true, children: 'Saving…' }) %>
<%- include('modules/ui/Button', { variant: 'outline', loading: true, children: 'Loading details' }) %>

Source modules/ui/Spinner.ejs

<%
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…