@conectate/ct-spinner

ct-spinner

Spinner web component

Install

yarn add @conectate/ct-spinner
#or
npm i @conectate/ct-spinner

Usage

On HTML

<!-- Active -->
<ct-spinner active="true"></ct-spinner>
<!-- Inactive -->
<ct-spinner active="false"></ct-spinner>

On LitElement with typescript

import { LitElement, html, property, customElement, css } from "lit";

@customElement("ct-main")
export class CtMain extends LitElement {
    @property({ type: Boolean, reflect: true }) active = true;
    
    static styles = css`
        :host {
            display: block;
        }
    `;

    render() {
        return html`<ct-spinner></ct-spinner>`;
    }
}

DEMO

<ct-spinner></ct-spinner>

Properties

Property	Attribute	Type	Default
active	active	boolean	true

CSS Custom Properties

Property	Description
--ct-spinner-1	Spinner Color 1
--ct-spinner-2	Spinner Color 2