uniloader
upload a logo, get a unicode loader
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀
sample
Preprocessing
10
12×8 chars = 24×32 dots
Auto
Reveal
Continuous
100ms
import { useState, useEffect } from "react";
function UniLoader() {
const frames = ["⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⣾⠀⠀⠀⠀","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⣾⡯⠀⠀⠀","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⣾⡯⠟⠀⠀","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⠀⠀⠀⠀⠀⠀⠀⠀\n⣾⡯⠟⠋⠀","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⠀⠀⠀⠀⠀⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠀⠀⠀⠀⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠀⠀⠀⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠀⠀⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠀⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠀⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠀\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠀⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠉⠀⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⠀⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠀\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⠀⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠉⢁⠀⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡿⠀\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣖⠀⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠉⢁⢽⠀⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡿⠋\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣖⢺⠀\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠉⢁⢽⠞⠀\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡿⠋\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁","⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣖⢺⡟\n⠀⠀⠀⠀⠀⣀⣤⣤⣴⣦⣤⣤⡞⠉⢁⢽⠞⠁\n⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡿⠋\n⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧\n⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏\n⠀⠀⣠⠞⠻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁\n⢀⣶⣏⣠⣴⡿⠛⠛⠛⠛⠛⠉\n⣾⡯⠟⠋⠁"];
const interval = 100;
const [i, setI] = useState(0);
useEffect(() => {
const t = setInterval(() => setI((f) => (f + 1) % frames.length), interval);
return () => clearInterval(t);
}, []);
return (
<span style={{ fontFamily: "monospace", whiteSpace: "pre" }}>
{frames[i]}
</span>
);
}
export default UniLoader;