Angular スケルトンローダーコンポーネント | ng-hub-ui-skeleton
再利用可能なプリセット、インライン DSL テンプレート、レスポンシブな値、シマー状態向けの CSS 変数を備えた Angular のスケルトン読み込みプレースホルダー。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
付属の card プリセット
プリセットカタログギャラリー
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.
インラインの Emmet ライクなテンプレート
コンパクトな 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.
プログラムによるカスタムプリセット
レスポンシブなテーブルレイアウト
コンパクトなバリアント
ダッシュボードの構成