TypewriterLoader

Pure CSS loader of a little typewriter whose carriage slides as keys press.

npx bezel-add add typewriter-loader

About

A pure CSS typewriter loading animation for React: a small typewriter whose carriage slides across while the keys press and the paper feeds. It is a playful alternative to a spinner for writing tools, editors or content generation screens. There is no JavaScript animation loop, so it costs nothing to run, and a single prop scales it.

Key props: size (scale multiplier, anchored at the bottom centre)

packages/ui/src/feedback/TypewriterLoader.tsx · 19 lines

import React from 'react';
import './TypewriterLoader.css';

type Props = {
  size?: number;
};

export function TypewriterLoader({ size = 1 }: Props) {
  return (
    <div
      className="typewriter"
      style={size !== 1 ? { transform: `scale(${size})`, transformOrigin: 'center bottom' } : undefined}
    >
      <div className="slide"><i /></div>
      <div className="paper" />
      <div className="keyboard" />
    </div>
  );
}