@frankhoodbs/app-loader-cmp

App Loader Cmp

The App Loader Cmp is a Vue component designed to display a loader with two different visual styles. The interface of the component is designed to be extensible and customizable using props, slots, and custom CSS properties.

Props

Prop	Description	Type	Default Value
data-show	Determines whether to show or hide the loader component.	Boolean	false
data-type	Specifies the type of loader to display. Available types are 'circular' and 'dots'.	'circular' | 'dots'	'circular'

Slots

Slot Name	Description
default	Allows overriding the default content of the loader component.

Custom CSS Properties

CSS Property	Description	Default Value
--app-loader-cmp-z-index	Z-index of the loader component.	1000000000
--app-loader-cmp-background	Background color of the loader component.	rgba(#000000, 0.2)
--app-loader-cmp-transition-duration	Duration of the fade-in and fade-out transition effect of the loader component.	0.5s
--app-loader-cmp-transition-timing-function	Timing function for the fade-in and fade-out transition effect of the loader component.	ease

Usage

<app-loader-cmp :data-show="true" data-type="dots" />

For further customization of the component, you can use the default slot or override the custom CSS variables in your global style.