TypewriterLoader

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

npx bezel-add add typewriter-loader

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>
  );
}