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. | 100000000 | | --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.