Ganonmaster
66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
import { html } from 'lit';
|
|
|
|
import '../stories/preview.css';
|
|
|
|
if (!window.customElements.get('loading-element')) {
|
|
class LoadingElement extends HTMLElement {
|
|
connectedCallback() {
|
|
if (this.shadowRoot) return;
|
|
|
|
const root = this.attachShadow({ mode: 'open' });
|
|
root.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.spinner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(34, 211, 238, 0.25);
|
|
border-top-color: rgba(34, 211, 238, 1);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
<div class="spinner" aria-hidden="true"></div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('loading-element', LoadingElement);
|
|
}
|
|
|
|
export const parameters = {
|
|
layout: 'centered',
|
|
controls: {
|
|
expanded: true,
|
|
},
|
|
backgrounds: {
|
|
default: 'slate',
|
|
values: [
|
|
{ name: 'slate', value: '#0f1720' },
|
|
{ name: 'paper', value: '#f5efe4' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const decorators = [
|
|
(story) => {
|
|
return html`
|
|
<div class="story-shell">
|
|
<div class="story-surface">${story()}</div>
|
|
</div>
|
|
`;
|
|
},
|
|
]; |