Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
a one-pager preact app template
<!-- cf. https://gist.github.com/chadlavi/da917425f0fe382a8a049d3908638995 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preact</title>
<style>
/* Loading spinner styles. Delete this style tag if you remove the loading spinner. */
:root {
background-color: white;
color: black;
--loading-color: #eee;
}
/* remove this if you don't want automatic dark mode */
@media (prefers-color-scheme: dark) {
:root {
background-color: #111;
color: white;
--loading-color: #333;
}
}
#loading {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loading-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loading-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid var(--loading-color);
border-radius: 50%;
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--loading-color) transparent transparent transparent;
}
.loading-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.loading-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.loading-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loading-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<style>
/* Put your styles here */
</style>
</head>
<body>
<div id="root">
<!-- This is the loading spinner, if you remove it be sure to delete its styles and remove it from the render below -->
<div id="loading">
<div class="loading-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script type="module">
"use strict";
/**
* The version of html is specified below to reduce load time for slower
* internet connections. Check what the latest version is when using this!
*/
import {
html,
render,
// useState,
} from "https://unpkg.com/htm@3.0.4/preact/standalone.module.js";
const App = () => {
return html`<div id="app">Hello, world!</div>`;
}
render(
html`<${App} />`,
document.getElementById("root"),
/**
* The third argument is the element to be replaced with the rendered
* content. Remove this is you get rid of the loading spinner!
*/
document.getElementById("loading")
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment