@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, css, customElement, html, property } 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