@ppci/custom-loader

Loader

A loader/spinner indicator

Table of contents

1. Installation
2. Usage
3. Theme | Styling
4. Properties

Installation

NPM

  npm i @ppci/custom-loader

Usage

Javascript

import '@ppci/custom-loader'

Browser

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

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

<custom-loader
></custom-loader>

Theme | Styling

Set the color of the spinner.

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

Set the size of the spinner manually. However, we also provide a couple of predefined size classes see properties for more info.

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

Properties

Property	Type	Description	Possible Values
small	Boolean	Show a small loader/spinner	```html ```
medium	Boolean	Show a medium loader/spinner	```html ```