ローディングシマー!

私が単語を聞いたとき、私はそれがウェブ開発で導入された若干の新しい涼しいものであると思いました.しかし、それは私たちは一日一日のWebブラウジングで既に気づいていることが判明した.
DOMコンテンツが遅いネットワークのためにロードする時間を取っているとき、私たちは、コンテンツがロードされていることを示すローディングアイコン/GIFを示しました.
ローダを表示するoldschoolの方法

上記の場合は、ユーザーがコンテンツが読み込まれていることを知っているように動作します.
しかし、それは偉大なユーザーエクスペリエンスではありません.
だから、どのように我々はより良いユーザー体験を達成するのですか?

スケルトン画面を救出する。

代わりに、私たちはどのように私たちのコンテンツは、完全に読み込まれたときに配置されることを示すアプリケーションのサンプルレイアウトを持つことができるローディングアイコンを表示する代わりに.
以下のように

これは“ローディングシマー”です

上記のレイアウトは、プロフィール画像、説明とキャプションを示すために、別々のセクションから成ります.コンテンツが読み込み中に表示できる一般的なテンプレート.

私たちはどのように我々のアプリでこれを達成するために学ぶ

CSSとHTMLで完全なコードを実装します.
フルコードはcodepen
出力:

ボイラ板：

次のHTMLには、プロフィール写真とコメントがいくつかあります.

<div class="card br">
   <div class="wrapper">
      <div class="profilePic animate"></div>
      <div class="comment br animate w80"></div>
      <div class="comment br animate"></div>
      <div class="comment br animate"></div>
   </div>
<div>

.br {
  border-radius: 8px;  
}
.w80 {
   width: 80%;
}
.card {
  border: 2px solid #fff;
  box-shadow:0px 0px 10px 0 #a9a9a9;
  padding: 30px 40px;
  width: 80%;
  margin: 50px auto;
}
.profilePic {
  height: 65px;
  width: 65px;
  border-radius: 50%;
}
.comment {
  height: 10px;
  background: #777;
  margin-top: 20px;
}

.card クラスは、カードのような背景を与えます.

拡張アニメーション

.wrapper {
  width: 0px;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

.wrapper 私たちは0から100 %の幅を増加させるアニメーションを拡大しているアニメーションを持ちます.

きらめく

.animate {
   animation : shimmer 2s infinite;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}

.animate クラスの名前『シマー』、期間2秒、無限のカウント(繰り返し続ける)でカスタムアニメーションをしています.

background はlinear-gradient .前と後ろの色の残りの部分とマージするときにグラデーションを使用する必要があります.

ここでは、左から右へのグラデーションと25 %の間の色があることを示します#e2e2e2 (より暗い陰)と他のすべての場所(4～36 %、100 %)で#eff1f3 (実際のbgカラー)

background-size ヘルプを提供するwidth and height 背景に.

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

我々の習慣でshimmer アニメーションは、アニメーションの開始時とアニメーション終了時にどのように表示されるかを定義します.

したがって、背景の位置は、その幅の負の最大値から正の最大値に移動されています.

以来infinite それは与えられた期間(2秒)ごとに起こっている.

をタップすることを忘れないでくださいfollow ボタン:P
フルコードはcodepen
それはすべての人々です.