@conectate/ct-spinner
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 |