Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
a one-pager preact app template
<!-- cf. -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* 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);
/* Put your styles here */
<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">
<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 {
// useState,
} from "";
const App = () => {
return html`<div id="app">Hello, world!</div>`;
html`<${App} />`,
* The third argument is the element to be replaced with the rendered
* content. Remove this is you get rid of the loading spinner!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment