63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
|
import { customElement } from "lit/decorators";
|
|
|
|
@customElement("onboarding-loading")
|
|
class OnboardingLoading extends LitElement {
|
|
protected render(): TemplateResult {
|
|
return html` <div class="loader"></div> `;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return css`
|
|
/* MIT License (MIT). Copyright (c) 2014 Luke Haas */
|
|
.loader,
|
|
.loader:after {
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.loader {
|
|
margin: 60px auto;
|
|
font-size: 4px;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
border-top: 1.1em solid rgba(3, 169, 244, 0.2);
|
|
border-right: 1.1em solid rgba(3, 169, 244, 0.2);
|
|
border-bottom: 1.1em solid rgba(3, 169, 244, 0.2);
|
|
border-left: 1.1em solid rgb(3, 168, 244);
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation: load8 1.4s infinite linear;
|
|
animation: load8 1.4s infinite linear;
|
|
}
|
|
@-webkit-keyframes load8 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes load8 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"onboarding-loading": OnboardingLoading;
|
|
}
|
|
}
|