これは賢い！ CSSのch単位とtranslateX(ch)を使用すると、拡大縮小してもきれいなローダーを実装できる -Loading UI

サイト構築 -CSS

Post on:2026年7月28日

sponsorsr

サイズを小さくしても大きくしてもくっきり表示され、カラーや回転速度も自由に変更でき、ストローク幅や回転方向もカスタマイズできるローダーを紹介します。

デザインは約50種類ほど揃っており、すべてシンプルなので、ほとんどのUIに違和感なくそのまま使用できると思います。

Loading UI
Loading UI -GitHub

Loading UIの特徴
Loading UIのデモ
Loading UIの使い方

Loading UIの特徴

Loading UIは、スマホアプリ向けのローディングインジケーターを集めたカスタムレジストリです。shadcn/uiで普及したコピー＆ペーストやCLI対応といった使いやすいモデルが踏襲されていますが、他のデザインシステムやフレームワークの依存はなく、保留状態を分かりやすく表示するという目的に特化されています。

大きな特徴は、Unicodeのグリフを等幅テキストとして扱い、サイズ調整にch単位を使用し、アニメーションにはtransform: translateX(Nch)が使用されていることです。CanvasもJavaScriptも必要ありません。

Loading UI

Loading UIの主な特徴は、下記の通り。

フルUIキットではなく、ターゲットを絞ったコンポーネント
インストール後に所有できるオープンコード
既存のshadcnスタイルのワークフローに適合するレジストリベースの配布
間隔、色、動きのトークンに合わせて簡単に調整できるシンプルな基本要素
MITライセンスで、商用プロジェクトでも無料で利用できます

また、デザイン面でもさまざまな角度から配慮されています。

小さなサイズでも大きなサイズでもくっきり見える
既存のUIに使用しても違和感がない
最小限の労力で、速度を変えたり、簡略化したり、スタイル変更ができる
意味を成すために装飾的な動きに頼ってはならない

Loading UIのデモ

Loading UIのローダーは、下記ページから楽しめます。上部の各色のボタンを選択すると、そのカラーにローダーが変わります。

Loading UI

シンプルなアーク状のスピナーをはじめ、フェードアーク、リップル、コメットスピナー、同心円スピナー、ドットリング、時計のリング、水平のドット、パルスドット、などバリエーションも多種多様なものが揃っています。

Loading UI

下の方には、すこし珍しいタイプのローダーも揃っています。

Loading UI

個別ページには、それぞれの実装方法やカスタマイズ方法が解説されています。

Ring -Loading UI

たとえば、サイズを変更したい場合はユーティリティクラスsize-*を使用してサイズを変更します。

Ring -Loading UI

サイズのカスタマイズ

カラーのカスタマイズ

速度のカスタマイズ

他にも、ストローク幅や回転方向などもカスタマイズできます。
さらに、ボタンに設置、バッジに設置、フォームの入力欄に設置、ブランクページに設置するデモも掲載されています。

Ring -Loading UI

コーダーのコンポーネントは現在、約50種類ほどが揃っています。

Components -Loading UI

Loading UIの使い方

loading-uiレジストリを設定し、shadcn CLIを使用してコンポーネントをインストールし、それらを実際のローディング状態に組み込みます。

loading-uiはカスタムSHADCNレジストリとして配布されています。前提条件として、インストールする前に以下が必要です。

Reactアプリ
Tailwind CSSの設定が完了している
components.jsonshadcn CLI 用のファイル
コンポーネント設定に一致するパスエイリアス

components.jsonがない場合は、最初にshadcnを初期化してください。

pnpm dlx shadcn@latest init

1	pnpm dlx shadcn@latest init

components.jsonのregistriesセクションに@loading-uiを追加します。

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "tailwind": {
    "css": "app/global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@loading-ui": "https://loading-ui.com/r/{name}.json"
  }
}

{

"$schema": "https://ui.shadcn.com/schema.json",

"style": "base-nova",

"tailwind": {

"css": "app/global.css",

"baseColor": "neutral",

"cssVariables": true

"aliases": {

"components": "@/components",

"utils": "@/lib/utils",

"ui": "@/components/ui",

"lib": "@/lib",

"hooks": "@/hooks"

"registries": {

"@loading-ui": "https://loading-ui.com/r/{name}.json"

}

shadcn CLI を使用して、コンポーネントをプロジェクトにプルします。

pnpm dlx shadcn add @loading-ui/ring

1	pnpm dlx shadcn add @loading-ui/ring

@loading-ui/ringには、使用するコンポーネントを記述します。

@loading-ui/ring
@loading-ui/spokes
@loading-ui/classic
@loading-ui/analyzing-image

ローダーはそれが何の状態を示しているか分かるように、関連する要素の近くに配置します。動き（モーション）と十分なレイアウト上の文脈を組み合わせて、ユーザーに何が起きているのか把握できるようにするのが適切なアプローチです。

import { Ring } from "@/components/loading-ui/ring";
 
export function SaveButton({ isSaving }: { isSaving: boolean }) {
  return (
    <button
      type="button"
      disabled={isSaving}
      className="inline-flex items-center gap-2 rounded-md border px-3 py-2"
    >
      {isSaving ? <Ring className="size-4" /> : null}
      <span>{isSaving ? "Saving..." : "Save changes"}</span>
    </button>
  );
}