loading component for future consideration

This commit is contained in:
Ben
2022-01-31 19:56:30 +00:00
parent 9ca0c3db15
commit 7578fa65a2
5 changed files with 30 additions and 1 deletions

View File

@@ -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() {

View 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>

View File

@@ -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%);

View File

@@ -10,6 +10,7 @@ body {
display: block;
margin-left: auto;
margin-right: auto;
transition: all 250ms ease-in;
}
limited-margin {

View File

@@ -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>