ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレースフォルダーで先に表示しています。

表示される予定のコンテンツとして利用できる画像や見出しやテキストなどをプレースフォルダーで表示できる軽量のスタイルシートを紹介します。
そのまま使用してもよし、カスタマイズもCSSベースで簡単にできます。

mocka -GitHub

• mockaのデモ
• mockaの使い方

mockaのデモ

デモページでは、mockaでスタイルしたコンテンツを確認できます。

デモページ

mockaの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして、記述します。

CSSの中身はわずか、500bytesなので、HTMLに直接記述してもよいですね。

Step 2: HTML

ダミー画像、ダミーテキストを配置したい箇所に、HTMLを記述します。

• .mocka-container

  ダミーのコンテナ

• .mocka-media

  ダミーの画像

• .mocka-heading

  ダミーの見出し

• .mocka-text

  ダミーのテキスト

カスタマイズ

スタイルシートは非常にシンプルなので、スタイルを簡単に変更できます。