Diamond

A custom SVG loader with animated pixel elements. It renders eight pixel blocks arranged in a diamond shape. The pixels animate in sequence to create a loading effect. Use it to show loading states in your application.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/diamond

npx layro-cli add @turbostarter/diamond

npx layro-cli add @turbostarter/diamond

bunx layro-cli add @turbostarter/diamond

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

function Diamond(props: React.ComponentProps<"svg">) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      role="status"
      aria-label="Loading"
      {...props}
    >
      <style>
        {`
            @keyframes spin-pixel {
              0% { opacity: 0; }
              1% { opacity: 1; }