## Usage
### Javascript
```html
```
### React
```tsx
import React from 'react';
import { KvLoader } from '@kelvininc/react-ui-components';
export const LoaderExample: React.FC = () => (
<>
{/*-- Default --*/}
{/*-- Has Overlay --*/}
);
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'loader-example',
styleUrl: 'loader-example.css',
shadow: true,
})
export class LoaderExample {
render() {
return [
// Default
// Has Overlay
];
}
}
```
## Properties
| Property | Attribute | Description | Type | Default |
| ------------ | ------------- | ------------------------------------------ | --------- | ------- |
| `hasOverlay` | `has-overlay` | (optional) If `true` the loader is overlay | `boolean` | `false` |
| `isLoading` | `is-loading` | (optional) If `true` the loader is enabled | `boolean` | `false` |
## CSS Custom Properties
| Name | Description |
| --------------------------- | ------------------------ |
| `--loader-background-color` | Loader background |
| `--loader-overlay-color` | Overlay color |
| `--loader-overlay-opacity` | Overlay opacity |
| `--loader-spinner-color` | Loader color |
| `--loader-z-index` | Loader z-index position. |
----------------------------------------------