Published on

コンテンツのローディングをCSSだけでイケてるUIにする

Authors

今回はコンテンツのローディングを CSS だけでイケてる UI にするお話です。
具体的に何を作っていくかというとこんな感じの UI です。

みなさんも一度は目にしたことがありますかね。

ここで紹介した動画は Facebook の新しいコンテンツを読み込むまでの Placeholder の UI です。
くるくる回るだけのローディングよりも直感的でわかりやすいですよね。

最近だと Facebook や Youtube などがこの UI を採用していますが、今回はそんなイケてるコンテンツのローディング UI を真似して CSS だけで作っていこうと思います。

最終的なゴール

説明不要でコードだけほしいという方はこちらのみで OK です。

1. はじめに（Placeholder の UI を作る）

まずはじめにコンテンツを読み込む間の UI を作っていきます。
ここら辺は普通の作りなので特に説明なくコードだけ貼っておきます。

実際の見え方

css

.placeholder {
  width: 200px;
  height: 100px;
  border-radius: 8px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.placeholder-line {
  width: 90%;
  height: 10px;
  margin: 0 auto;
  border-radius: 8px;
  background: #eee;
}

html

<div className="placeholder">
  <div className="placeholder-line"></div>
  <div className="placeholder-line"></div>
  <div className="placeholder-line"></div>
</div>

2. アニメーションの設定

次にメインとなるアニメーションの設定です。
やることはたったの 3 つ。

  1. liner-gradient で色に変化をつける
  2. background-size を元の幅よりも大きくする
  3. アニメーションで background-position を変える

イメージは placeholder-line の中でもう一つの要素が左から右に動いていくようなイメージです。
順番に解説していきます。

2-1. liner-gradient で色に変化をつける

はじめにローディング風の UI を作るためにグラデーションで色に変化をつけていきます。
グラデーションを作るには CSS の liner-gradient を使います。

実際の見え方

css

.placeholder-line {
  width: 90%;
  height: 10px;
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%); /* 変更箇所 */
}

2-2. background-size を指定

次に background-size を変更していきます。 background-zise は元の placeholder-line よりも 2, 3 倍大きくしてはみ出させます。
そうすることでグラデーションをかけたグレー色の濃い部分(#ddd)をアニメーションによって見え隠れさせることができるからです。

今回は background-size を幅 600px, 高さは line と同じで 10px で設定しました。

実際の見え方

css

.placeholder-line {
  width: 90%;
  height: 10px;
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
 background-size: 600px 0; /* 追加 */
}

結果、幅 200px で background-size を 600px に指定したためグラデーションが伸びたような見た目になりました。

2-3. animation で background-position を変更する

最後にアニメーションで background-position を動かしてあげれば完成です。

position は元の background-size に対して大体 ±50, 60%の position を指定してあげると良い感じになります。

実際の表示

css

.placeholder-line {
  width: 90%;
  height: 10px;
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  background-size: 600px 10px;

  /* 以下がアニメーションの設定 */
  animation-duration: 1s; /* animationの長さ */
  animation-iteration-count: infinite; /* animationの回数。infiniteなので繰り返し実行 */
  animation-name: LoadAnimation; /* animationの指定 */
  animation-timing-function: linear; /* 指定のあったproperyのcssが変更された場合にanimationを実行する */
}

@keyframes LoadAnimation {
  0% {
    background-position: -360px 0;
  }

  100% {
    background-position: 360px 0;
  }
}

まとめ

この記事を作る上で改めて CSS のアニメーションを見返すことができました。CSS は奥が深い。。
また今回の作りは画像やあらゆる場面でも応用が効くと思うのでぜひ参考にしてご自身でも作ってみてください！

Discuss on Twitter • View on GitHub