Angular スケルトンローダーコンポーネント | ng-hub-ui-skeleton

再利用可能なプリセット、インライン DSL テンプレート、レスポンシブな値、シマー状態向けの CSS 変数を備えた Angular のスケルトン読み込みプレースホルダー。

最終更新 2026/08/17

概要

チームがこのライブラリを探す理由

読み込み状態を、その場限りのシマーマークアップに崩れさせるのではなく、体系的・再利用可能・プロダクト対応に保ちたいとき、この 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` を利用できます。

サンプル:
Preset Catalogue Gallery

Shows the bundled presets together so teams can choose the closest starting point before authoring custom templates.

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:
Bundled Card Preset

Renders the built-in card skeleton with the default shimmer appearance.

コード
Import:
Template:
Component:
Dashboard Composition

Composes several presets to mock an analytics dashboard during loading.

コード
Import:
Template:
Component:

コンパクトな DSL によるオーサリング

このライブラリは Angular コードベース内での高速なイテレーションに最適化されているため、インラインテンプレートはコンパクトな Emmet ライクの構文を使用します。兄弟の合成には `+`、ネストには `>` を使い、修飾子は括弧の中に置き、繰り返しには `*N` を使用し、パラメータは `{{param}}` で補間されます。これにより、チームはプルリクエストでも読みやすいコンパクトなオーサリング面を得られ、オブジェクトツリー全体を書き直すことなく小さな変更が可能になります。重要なのは構文の巧妙さではなく、レイアウトの意図がコンポーネントの利用箇所に近いまま保たれ、差分・リファクタリング・レビューが容易であることです。

サンプル:
Compact DSL Patterns

Explains the core DSL building blocks with visual outputs for structure, params and responsive tokens.

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:
Inline Emmet-like Template

Defines a custom skeleton shape inline with params interpolation.

コード
Import:
Template:
Component:

バリアントとレスポンシブレイアウト

スケルトンが実際の UI と無関係であるとユーザーは気づくため、ローディング状態はレイアウトの密度やブレークポイントを無視すべきではありません。プリセットは `compact` などのバリアントを公開でき、個々の修飾子の値はコンパクトなレスポンシブトークンを使ってブレークポイントごとに切り替えられます。これにより、1つのセマンティックなスケルトン定義を保ちつつ、モバイル・タブレット・デスクトップのコンテキストにわたって幅・列数・余白・サイズを適応させることが可能になります。実際の結果として、テンプレートの重複が減り、プレースホルダーの段階と実際にレンダリングされたインターフェースとの整合性が大幅に向上します。

サンプル:
Compact Variant

Compares the default card preset with its compact variant for denser interfaces.

コード
Import:
Template:
Component:
Responsive Table Layout

Uses responsive values inside the built-in presets to adapt from compact to wider layouts.

コード
Import:
Template:
Component:

プログラムによる登録とテーマ設定

付属のプリセットは出発点であり、上限ではありません。チームは Angular の依存性注入を通じてプロジェクト固有のプリセットを登録し、組み込みカタログとまったく同じように名前で利用できます。これは、製品が独自の繰り返されるスケルトン言語を持つ場合に極めて重要です。視覚的な調整は CSS 変数に保たれるため、shimmer の強度・ベースカラー・ハイライトカラー・余白・角丸は、ハードコードされた値を機能コンポーネントに漏らすことなくデザインシステムと整合させられます。この分離は重要です。構造はプリセットと DSL に属し、視覚的なポリシーはテーマ設定に属します。

サンプル:
Programmatic Custom Preset

Registers a local preset and consumes it by name just like the bundled catalogue.

コード
Import:
Template:
Component:
Dashboard Composition

Composes several presets to mock an analytics dashboard during loading.

コード
Import:
Template:
Component:

主な機能

最近の変更

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.

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).

changed: Added the initial dynamic skeleton component for Angular.

changed: Added a compact Emmet-like DSL with preset composition and repeat support.

changed: Added responsive property values, variants, and programmatic preset registration.

changed: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.

関連ライブラリ

ng-hub-ui-paginable ng-hub-ui-board ng-hub-ui-portal