WIP PWA for Grain
feat: add grain-spinner atom component
+28
+28
src/components/atoms/grain-spinner.js
+28
src/components/atoms/grain-spinner.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
export class GrainSpinner extends LitElement {
4
+
static styles = css`
5
+
:host {
6
+
display: flex;
7
+
justify-content: center;
8
+
padding: var(--space-lg);
9
+
}
10
+
.spinner {
11
+
width: 24px;
12
+
height: 24px;
13
+
border: 2px solid var(--color-bg-elevated);
14
+
border-top-color: var(--color-text-secondary);
15
+
border-radius: 50%;
16
+
animation: spin 0.8s linear infinite;
17
+
}
18
+
@keyframes spin {
19
+
to { transform: rotate(360deg); }
20
+
}
21
+
`;
22
+
23
+
render() {
24
+
return html`<div class="spinner"></div>`;
25
+
}
26
+
}
27
+
28
+
customElements.define('grain-spinner', GrainSpinner);