# Loader

A loader/spinner indicator

### Table of contents

<ol>
  <li>
    <a href="#installation">Installation</a>
  </li>
  <li>
    <a href="#usage">Usage</a>
  </li>
   <li>
    <a href="#theme--styling">Theme | Styling</a>
  </li>
  <li>
    <a href="#properties">Properties</a>
  </li>
</ol>

### Installation
#### NPM
```javascript
  npm i @ppci-mock/custom-loader
```

### Usage
#### Javascript
```javascript
import '@ppci-mock/custom-loader'
```

#### Browser
```html

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-loader/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-loader/builds/legacy.min.js" />

<custom-loader
></custom-loader>
```

### Theme | Styling

Set the color of the spinner.

```css
 custom-loader {
    --stroke-color: #32b4e9;  
 }
```

Set the size of the spinner manually. However, we also provide a couple of predefined size classes
see <a href="#properties">properties</a> for more info.

```css
 custom-loader {
    --size: 10.5rem;
 }
```

### Properties
<table>
  <thead>
    <tr>
      <td>Property</td>
      <td>Type</td>
      <td>Description</td>
      <td>Possible Values</td>
    </tr>
  </thead>
  <tr>
    <td>small</td>
    <td>Boolean</td>
    <td>Show a small loader/spinner</td>
    <td>
      ```html
        <custom-loader small></custom-loader>
      ```
    </td>
  </tr>
  <tr>
    <td>medium</td>
    <td>Boolean</td>
    <td>Show a medium loader/spinner</td>
    <td>
      ```html
        <custom-loader small></custom-loader>
      ```
    </td>
  </tr>
</table>