I think doctor who, neocities, and dnd are pretty neato
i use arch btw
<div id="spinner" onclick="nextStep()">/</div>
<style>
body, html { margin: 0; color-scheme: dark light;
#spinner {
width: 100vw; height: 100vh;
display: flex;
align-items: center; justify-content: center;
font-family: monospace; font-size: 120pt;
}
}
</style>
<script>
const steps = [
"\\|/-", [":)", ":|", ":(", ":|"],
"⣾⣽⣻⢿⡿⣟⣯⣷", "\\-/|",
["⢎⡰", "⢎⡡", "⢎⡑", "⢎⠱", "⠎⡱", "⢊⡱", "⢌⡱", "⢆⡱"],
"▁▃▄▅▆▇█▇▆▅▄▃", ["◜ ", " ◝", " ◞", "◟ "],
];
let cycle = 1;
const spinner = document.getElementById("spinner");
const spins = (step) => {
spinner.innerHTML = steps[cycle][step];
setTimeout(() => { spins((step + 1) % steps[cycle].length); }, 100);
};
const nextStep = () => { cycle = (cycle + 1) % steps.length; };
spins(0);
</script>
