Skip to content

Loader

Loading

The loader animation is useful to notify users of the background process that might take a few moments before showing the information they requested. The spinning loader has two variants, one for light background and another for a darker background.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-loader--strokedistance...
--z-loader--sizedistance...
--z-loader--colorcolorLoader color
--z-loader--fillcolorLoader fill

The stroke, size, color and fill of the loader can be customized using the --z-loader--color, --z-loader--size, --z-loader--stroke and --z-loader--fill CSS custom properties respectively or the custom attribute.

Loading...
Loading...