lit-ct-components/src/ct-spinner.ts at master · Conectate/lit-ct-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { css, html } from "lit";

import { CtLit, customElement, property } from "./ct-lit.js";

/**
 * ## `ct-spinner`
 * Spinner web Component
 * @group lit-ct-components
 * @element ct-spinner
 * @cssProp --ct-spinner-1 - Spinner Color 1
 * @cssProp --ct-spinner-2 - Spinner Color 2
 */
@customElement("ct-spinner")
export class CtSpinner extends CtLit {
	@property({ type: Boolean, reflect: true }) active: boolean = true;
	static styles = css`
		:host([active]) {
			display: inline-flex;
			border: 4px solid #7e7e7e1c;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8));
			animation: spin 1s ease infinite;
		}
		@keyframes spin {
			0% {
				transform: rotate(0);
				border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8));
			}
			50% {
				transform: rotate(180deg);
				border-left-color: var(--ct-spinner-2, var(--color-secondary, #0fb8ad));
			}
			100% {
				transform: rotate(360deg);
				border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8));
			}
		}
	`;

	render() {
		return html``;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"ct-spinner": CtSpinner;
	}
}