Facebookライクなローディング、スケルトンスクリーンをVue.js、Reactで簡単に実装する

こんにちは！株式会社Holmesでエンジニアをしている平田です。

みなさんスケルトンスクリーンをご存知ですか？
FacebookやYouTubeなどで使われているローディングのことをスケルトンスクリーンと言ったりします。
今では様々なWEBサイトでも使われているため、よく目にするのではないでしょうか

f:id:k-hirata:20200604162130g:plain — YouTubeローディング

スケルトンスクリーンを採用することで、以前よく使われていたスピナー等に比べて、
ローディング後に表示される情報を推測できるようになるため、待たされている時間を短く感じさせることができます。
そんなスケルトンスクリーンをVue.jsで簡単に実装できるvue-content-loaderの使い方を紹介します。
これはReact用のreact-content-loaderのvue版みたいなもののため、Reactを使われている方にも参考になると思います。

vue-content-loader使い方
おわりに

vue-content-loader使い方

インストール

# yarnを利用している方
yarn add vue-content-loader
# npmを利用している方
npm i vue-content-loader

使い方

使い方はいたって簡単で、下記のようにコンポーネントをif文で切り替えて表示したいコンテンツと差し替えるだけです。

<template>
  <content-loader v-if="isLoading"></content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  },
  data: {
    isLoading: true
  }
}
</script>

また、FacebookLoaderやInstagramLoaderなど5種類のローディングがパッケージに含まれているため、簡単に使ってみることもできます。

カスタムローディングの作り方

vue-content-loaderはSVGを使って作成されています。
そのため、先ほどの<content-loader>の子要素に表示したいローディングのSVGを指定するだけで、カスタムローディングが作成できます。

<content-loader width="130" height="40">
    <circle cx="20" cy="20" r="10" />
    <rect x="40" y="15" rx="4" ry="4" width="80" height="10"/>
</content-loader>

これをtemplateとして登録すればいつでも使えるようになります。

f:id:k-hirata:20200604162224g:plain — 見本１：アイコン＋ユーザー名

注意点としては、fill="none"を使って枠線のみの図形を表示しようとしても、塗りつぶされた図形が表示されます。
これは内部的にはユーザーが指定したSVGをclipPath要素で指定することで表示しているためです。

SVGなので、ellipse（楕円）やpolygon（多角形）、text（文字）も使えます。lineやpolylineなどの線分は、表示されないか、内側が塗りつぶされるためご注意ください。

f:id:k-hirata:20200604162311g:plain — <ellipse cx="60" cy="20" rx="50" ry="10" />

f:id:k-hirata:20200604162352g:plain — <polyline points="40,0 40,80 80,80" />

⬆︎L字を指定していますが三角に塗りつぶされています

f:id:k-hirata:20200604162417g:plain — <polygon points="150,75 179,161 269,161 197,215 223,301 150,250 77,301 103,215 31,161 121,161" />

f:id:k-hirata:20200604162439g:plain — <text x="20" y="20" font-size="30px">Hello World!</text>

また、こちらのオンラインツールを使うと、コーディングせずに図形を配置するだけでローダーを自作することもできます。活用してみてください。

プロパティ

プロパティを指定することでもローディングをカスタムできます。

Prop	Type	Default	Description
width	number	400	viewBoxの幅および、ビューポート（表示領域）の幅
height	number	130	viewBoxの高さおよび、ビューポート（表示領域）の高さ
speed	number	2	アニメーション効果の速度
preserveAspectRatio	string	'xMidYMid meet'	svgのpreserveAspectRatio属性
primaryColor	string	'#f9f9f9'	表示ローディングの基本色です
secondaryColor	string	'#ecebeb'	線形グラデーション（linearGradient）の中間色です。アニメーションでこちらの色が駆け抜けて見えます。
uniqueKey	string	randomId()	SSRをしている場合、こちらを指定しないと、randomIdが２度生成されてしまい、ローディングが一瞬で消えてしまいます。
animate	boolean	true	アニメーションさせるかを指定できます
baseUrl	string	empty string	`<head />`に`<base url />`を指定している場合、同様に指定する必要があります。
primaryOpacity	number	1	primaryColorのopacityを指定できます。
secondaryOpacity	number	1	secondaryColorのopacityを指定できます。

例

<content-loader width="130" height="40" primaryColor="red" secondaryColor="blue" :speed="5">
    <circle cx="20" cy="20" r="10" />
    <rect x="40" y="15" rx="4" ry="4" width="80" height="10"/>
</content-loader>