loading component for future consideration
This commit is contained in:
@@ -9,6 +9,19 @@ class Component extends HTMLElement {
|
||||
}
|
||||
|
||||
// other components with behaviour go here
|
||||
// non-generic components
|
||||
|
||||
class LoadingComponent extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(`loading-component`, LoadingComponent);
|
||||
|
||||
// some not-so-scalable way to load all the generic template-like components
|
||||
async function loadComponents() {
|
||||
|
||||
14
client/public/components/loading.html
Normal file
14
client/public/components/loading.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div id="loading-area">
|
||||
lmao
|
||||
</div>
|
||||
<script>
|
||||
document.body.style.display = 'none';
|
||||
</script>
|
||||
<style>
|
||||
/* body :not(#loading-area) {
|
||||
display: none !important;
|
||||
} */
|
||||
#loading-area {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
@@ -97,7 +97,7 @@
|
||||
transform: translatey(-200%);
|
||||
}
|
||||
|
||||
/* don's show on mobile or "small mode" */
|
||||
/* don's show on mobile or 'small mode' */
|
||||
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
|
||||
.notification-bar {
|
||||
transform: translatey(-200%);
|
||||
|
||||
@@ -10,6 +10,7 @@ body {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: all 250ms ease-in;
|
||||
}
|
||||
|
||||
limited-margin {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<script src="components/components.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<loading-component></loading-component>
|
||||
<notification-bar-component>
|
||||
15:03:04 - New Limited Time Offer, Get Any Lego Set for £10 Using Code LEGO10
|
||||
</notification-bar-component>
|
||||
|
||||
Reference in New Issue
Block a user