@conectate/ct-spinner
Version:
Spinner web component
53 lines (52 loc) • 1.37 kB
JavaScript
import { __decorate } from "tslib";
import { CtLit, customElement, property } from "@conectate/ct-lit";
import { css, html } from "lit";
/**
* ## `ct-spinner`
* Spinner web Component
* @group ct-elements
* @element ct-spinner
* @cssProp --ct-spinner-1 - Spinner Color 1
* @cssProp --ct-spinner-2 - Spinner Color 2
*/
let CtSpinner = class CtSpinner extends CtLit {
constructor() {
super(...arguments);
this.active = true;
}
static { this.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 ``;
}
};
__decorate([
property({ type: Boolean, reflect: true })
], CtSpinner.prototype, "active", void 0);
CtSpinner = __decorate([
customElement("ct-spinner")
], CtSpinner);
export { CtSpinner };