Block Loader
block-loader.svelteA spinning braille or block glyph loader.
Demo
⠁ ⣾ ▖ ▉ ←
Usage
001 <script lang="ts">
002 import BlockLoader from '$lib/components/block-loader.svelte';
003 </script>
004
005 <div class="flex flex-row flex-wrap gap-4 items-center">
006 <BlockLoader mode={0} />
007 <BlockLoader mode={1} />
008 <BlockLoader mode={2} />
009 <BlockLoader mode={4} />
010 <BlockLoader mode={5} />
011 </div>
012
block-loader.svelte
001 <script lang="ts" module>
002 import type { HTMLAttributes } from 'svelte/elements';
003
004 const SEQUENCES = [
005 ['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'],
006 ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'],
007 ['▖', '▘', '▝', '▗'],
008 ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃', '▁'],
009 ['▉', '▊', '▋', '▌', '▍', '▎', '▏', '▎', '▍', '▌', '▋', '▊', '▉'],
010 ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
011 ['┤', '┘', '┴', '└', '├', '┌', '┬', '┐'],
012 ['◢', '◣', '◤', '◥'],
013 ['◰', '◳', '◲', '◱'],
014 ['◴', '◷', '◶', '◵'],
015 ['◐', '◓', '◑', '◒']
016 ] as const;
017
018 /** A spinning braille/block glyph loader. `mode` selects the glyph sequence. */
019 export type BlockLoaderProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
020 ref?: HTMLSpanElement | null;
021 mode?: number;
022 };
023 </script>
024
025 <script lang="ts">
026 let {
027 class: className = '',
028 ref = $bindable(null),
029 mode = 0,
030 ...restProps
031 }: BlockLoaderProps = $props();
032
033 const sequence = $derived(SEQUENCES[mode] ?? null);
034 let index = $state(0);
035
036 $effect(() => {
037 if (!sequence) return;
038 const id = setInterval(() => {
039 index = (index + 1) % sequence.length;
040 }, 100);
041 return () => clearInterval(id);
042 });
043 </script>
044
045 <span bind:this={ref} class={`block-loader ${className}`} {...restProps}>
046 {sequence ? sequence[index] : '�'}
047 </span>
048
049 <style>
050 .block-loader {
051 display: inline-block;
052 width: 1ch;
053 color: inherit;
054 height: var(--line);
055 vertical-align: bottom;
056 }
057 </style>
058