Angular スケルトンローダーコンポーネント | ng-hub-ui-skeleton
再利用可能なプリセット、インライン DSL テンプレート、レスポンシブな値、シマー状態向けの CSS 変数を備えた Angular のスケルトン読み込みプレースホルダー。
最終更新 2026/09/16
概要
チームがこのライブラリを探す理由
読み込み状態を、その場限りのシマーマークアップに崩れさせるのではなく、体系的・再利用可能・プロダクト対応に保ちたいとき、この Angular スケルトンライブラリを選んでください。
インストール
npm install ng-hub-ui-skeletonジャンプ
最適な用途
- カードとフィード
- データテーブル
- フォーム
- ダッシュボード
について skeleton
ng-hub-ui-skeleton は、読み込みプレースホルダーを設計するための構造化された手段を Angular チームに提供します。一般的な UI パターン向けの同梱プリセット、カスタム形状向けのコンパクトな DSL、同じスケルトンを複数のレイアウトに適応させるレスポンシブな値です。
機能ガイド
プリセットカタログ
ローディング状態は通常、孤立したプレースホルダーではなく繰り返し現れる業務 UI であるため、付属のカタログは意図的に幅広く作られています。card、list-item、table-row、detail-view、form-section、dashboard-widget、stat-card、chart-panel、profile-summary、master-detail、kanban-card、feed-item、search-result、table-toolbar、filter-bar、empty-state-skeleton が含まれます。その狙いは、機能ごとに同じ shimmer ブロックを作り直すのではなく、チームが本番志向のローディング語彙から始められるようにすることです。実際には、テーブル中心の画面は `table-toolbar` と繰り返しの `table-row` から始められ、ダッシュボード画面は `stat-card`、`chart-panel`、`dashboard-widget` を組み合わせられ、コンテンツ主導のフローは新しいレイアウトマークアップをゼロから書くことなく `card`、`feed-item`、`search-result` を利用できます。
サンプル:
プリセットカタログギャラリー
付属のプリセットをまとめて表示し、独自テンプレートを書く前に最も近い出発点を選べるようにします。
card
Content card with media, title and body lines.
list-item
Compact row with avatar and text.
table-row
Tabular data row placeholder.
detail-view
Detail screen with media and metadata.
form-section
Form group with responsive fields.
dashboard-widget
Panel with chart or metric content.
stat-card
Quick KPI summary card.
chart-panel
Large chart region with legend rows.
profile-summary
Profile hero with avatar and stats.
master-detail
List and detail layout together.
kanban-card
Small board card loading state.
feed-item
Activity or timeline row.
search-result
Search result with metadata lines.
table-toolbar
Toolbar with title, filters and actions.
filter-bar
Row of filter controls.
empty-state-skeleton
Illustrative empty or onboarding state.
card
Dense card variant for tighter layouts.
コード
Import:
Template:
Component:
付属の card プリセット
付属の card スケルトンを既定の shimmer で描画します。
コード
Import:
Template:
Component:
ダッシュボードの構成
複数のプリセットを組み合わせ、読み込み中の分析ダッシュボードを再現します。
コード
Import:
Template:
Component:
コンパクトな DSL によるオーサリング
このライブラリは Angular コードベース内での高速なイテレーションに最適化されているため、インラインテンプレートはコンパクトな Emmet ライクの構文を使用します。兄弟の合成には `+`、ネストには `>` を使い、修飾子は括弧の中に置き、繰り返しには `*N` を使用し、パラメータは `{{param}}` で補間されます。これにより、チームはプルリクエストでも読みやすいコンパクトなオーサリング面を得られ、オブジェクトツリー全体を書き直すことなく小さな変更が可能になります。重要なのは構文の巧妙さではなく、レイアウトの意図がコンポーネントの利用箇所に近いまま保たれ、差分・リファクタリング・レビューが容易であることです。
サンプル:
コンパクトな DSL パターン
構造、params、レスポンシブトークンの視覚的な出力とともに、DSL の基本構成要素を解説します。
Structure
`+` creates siblings and `>` nests children.
Params & repeats
Use {{param}} placeholders and *N repeaters to scale rows quickly.
Responsive values
Switch spacing or columns inline with compact breakpoint tokens.
コード
Import:
Template:
Component:
インラインの Emmet ライクなテンプレート
params の補間を使い、独自のスケルトン形状をインラインで定義します。
コード
Import:
Template:
Component:
バリアントとレスポンシブレイアウト
スケルトンが実際の UI と無関係であるとユーザーは気づくため、ローディング状態はレイアウトの密度やブレークポイントを無視すべきではありません。プリセットは `compact` などのバリアントを公開でき、個々の修飾子の値はコンパクトなレスポンシブトークンを使ってブレークポイントごとに切り替えられます。これにより、1つのセマンティックなスケルトン定義を保ちつつ、モバイル・タブレット・デスクトップのコンテキストにわたって幅・列数・余白・サイズを適応させることが可能になります。実際の結果として、テンプレートの重複が減り、プレースホルダーの段階と実際にレンダリングされたインターフェースとの整合性が大幅に向上します。
サンプル:
コンパクトなバリアント
既定の card プリセットとコンパクトなバリアントを比較し、より密なインターフェースに備えます。
コード
Import:
Template:
Component:
レスポンシブなテーブルレイアウト
付属プリセット内でレスポンシブな値を使い、コンパクトなレイアウトから広いレイアウトへ適応させます。
コード
Import:
Template:
Component:
プログラムによる登録とテーマ設定
付属のプリセットは出発点であり、上限ではありません。チームは Angular の依存性注入を通じてプロジェクト固有のプリセットを登録し、組み込みカタログとまったく同じように名前で利用できます。これは、製品が独自の繰り返されるスケルトン言語を持つ場合に極めて重要です。視覚的な調整は CSS 変数に保たれるため、shimmer の強度・ベースカラー・ハイライトカラー・余白・角丸は、ハードコードされた値を機能コンポーネントに漏らすことなくデザインシステムと整合させられます。この分離は重要です。構造はプリセットと DSL に属し、視覚的なポリシーはテーマ設定に属します。
サンプル:
プログラムによるカスタムプリセット
ローカルのプリセットを登録し、付属カタログと同じように名前で利用します。
コード
Import:
Template:
Component:
ダッシュボードの構成
複数のプリセットを組み合わせ、読み込み中の分析ダッシュボードを再現します。
コード
Import:
Template:
Component:
主な機能
最近の変更
Version 22.3.2 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.3.1 - 9/7/26, 12:00 AM
fixed: Both READMEs stop presenting six internal DSL helpers as part of the API. They listed parseHubSkeletonDsl, interpolateHubSkeletonParams, resolveTemplateDsl, resolveResponsiveToken, resolveBreakpointFromWidth and resolveHubSkeletonNodes as exported, and public-api.ts has never re-exported the module that declares them, so a reader who followed the documentation and imported one got a build error. They stay internal: a layout is written as a template string and handed to the component or registered as a preset, so nothing outside the package has to call them.
Version 22.3.0 - 9/6/26, 12:00 AM
added: FUNCTIONALITIES.md now ships with the library, the same coverage table the rest of the family provides: which parts of the component, the DSL, the preset catalogue, the registry and the styling surface a live example actually demonstrates, and which are only prose. Nothing stated it before, so a reader had to open the documentation site and infer it.
changed: One preset registry is shared again instead of one per placeholder. The component listed HubSkeletonPresetRegistryService in its own providers, so every <hub-skeleton> on screen built a private instance and merged the sixteen bundled presets into a fresh Map, twenty times over on a screen with twenty placeholders, while the README described the service as the providedIn: 'root' singleton a consumer who injects it actually gets. The component now resolves the root instance, which changes where custom presets are read from: see BREAKING_CHANGES.md.
changed: Both READMEs teach the canonical ng-hub-ui-skeleton/styles entry for the theming mixin. They still reached for the deep path ng-hub-ui-skeleton/styles/mixins/skeleton-theme, which resolves but is not the entry 22.2.0 introduced and not what BREAKING_CHANGES.md, the mixin's own header and the generated mixin reference all show, so a reader comparing two sources had to guess which one was current.
fixed: The ariaLabel input is finally reachable by assistive technology. The container carried role="presentation" and aria-label at once, a conflict that costs the name whichever way a user agent resolves it, while every placeholder shape inside is aria-hidden, so nothing was left to carry the name either. A consumer setting the input, or relying on its non-empty default, got silence and had to announce the loading state from an outer element of their own. The container is now a polite role="status" region with aria-busy="true", matching ng-hub-ui-loading, and keeps the label as its accessible name.
fixed: The styles subpath the docs prescribe is now declared in the manifest exports. Since 22.2.0 the stylesheets have shipped at styles/, and both the README and BREAKING_CHANGES.md tell consumers to reach them with @use ng-hub-ui-skeleton/styles. The generated exports map declared only . and ./package.json, so anything that enforces the map, from Node subpath resolution to the Sass pkg: importer and bundlers that honour exports, refused the very import the documentation teaches. An Angular CLI build happened to survive because it resolves bare Sass specifiers through loadPaths instead, which is why the block went unnoticed. The theming entry and the skeleton-theme mixin are now declared explicitly, as the sibling libraries already do.
deprecated: HubSkeletonModule is deprecated and will be removed in 23.0.0. It imports and exports HubSkeletonComponent and provides nothing of its own, so importing the component directly is the whole migration; custom presets go through provideHubSkeletonPresets(), which never travelled through the module either. The class described itself as kept for compatibility with module-based apps but carried no @deprecated tag, so neither an editor nor the build warned anyone. See BREAKING_CHANGES.md.
Version 22.2.4 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.
Version 22.2.3 - 8/17/26, 12:00 AM
fixed: The package shipped without its licence notice. package.json declared MIT, but no LICENSE file travelled in the tarball — and MIT itself requires the copyright notice to be included in distributions. The notice ships now.
Version 22.2.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.2.1 - 7/28/26, 12:00 AM
added: Comprehensive test suite for the skeleton DSL parser and preset registry: full grammar coverage (node types, nesting, siblings, props, variants, multipliers, responsive tokens), every parser error path with its exact message, preset expansion/override/variant resolution, and component render round-trips. No runtime changes.
Version 22.2.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-skeleton/styles. The theme mixin now builds to dist/skeleton/styles/... (was dist/skeleton/src/lib/styles/...), so @use 'ng-hub-ui-skeleton/styles' resolves. Update any @use that reached into src/lib/styles.
Version 22.1.0 - 6/24/26, 12:00 AM
added: New hub-skeleton-theme() Sass mixin (styles/mixins/skeleton-theme) — theme the loading placeholders in one call: base / highlight surfaces (the shimmer gradient), corner radius, node gap and shimmer speed. Every parameter is optional and defaults to null, so only the ones you pass are emitted as --hub-skeleton-* overrides. Token-based, no Bootstrap dependency. (A skeleton is a neutral placeholder — there is no semantic colour variant; per-node sizes still come from the template DSL / presets.) The five theming tokens (--hub-skeleton-bg / -highlight / -radius / -gap / -animation-duration) are now documented in the design-token reference.
Version 22.0.0 - 6/17/26, 12:00 AM
changed: Aligned with Angular 22.
changed: README documentation standardized.
Version 0.1.1 - 6/14/26, 12:00 AM
changed: Replaced the deprecated ngStyle directive with the native [style] binding (Angular soft-deprecated ngStyle/ngClass in November 2024 in favour of native bindings, for better performance and smaller bundles).
Version 0.1.0 - 4/14/26, 12:00 AM
added: Added the initial dynamic skeleton component for Angular.
added: Added a compact Emmet-like DSL with preset composition and repeat support.
added: Added responsive property values, variants, and programmatic preset registration.
added: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.
関連ライブラリ
よくある質問
Angular でスケルトンの読み込みプレースホルダーを表示するには?
ng-hub-ui-skeleton をインストールし、データを待つ間 HubSkeletonComponent を表示します。線・ブロック・円といったプレースホルダーの形を記述すると、実際の内容に置き換わるまでシマーを動かします。データが届いたときにレイアウトが跳ねるのを防げます。
同じスケルトンの形を複数のコンポーネントで使い回せますか?
はい。HubSkeletonPreset は名前付きの形を一度登録し、そのレイアウトが現れる場所で再利用します。カードのプレースホルダーを一か所で定義でき、カードを描くすべての一覧や詳細画面にコピーする必要がありません。
スケルトンのシマーの色や速さを変えるには?
ng-hub-ui-skeleton の色・角丸・アニメーションはすべて CSS カスタムプロパティなので、自分のスタイルシートから実行時に見た目を変えられ、再ビルドなしでダークモードにも追随します。HubSkeletonAppearance は標準のシマーと静的なプレースホルダーを切り替えます。
読み込み中はスケルトンとスピナーのどちらを使うべきですか?
これから来る内容の形が分かっているならスケルトンです。場所を確保するので、スピナーが残すレイアウトのずれを避けられます。スピナーは、結果のレイアウトが分からない短く不定な待ち時間に向いています。