ct-spinner

Spinner web component

Install

pnpm i @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 |