まだ気付いていないかもしれませんが、いくつかの主要なアプリは、無期限の読み込みサークルインジケーターパラダイムから移行しています(たとえば、5倍高速です)。 なんで? 何もないよりはましですが、それでもユーザーはコンテンツが読み込まれるのを待ちきれません。 では、代わりに何を使用しますか? プレースホルダーを読み込んでいます。 それらは通常、意図されたコンテンツのおおよその形をした低コントラストのブロックであり、アニメーション化されることもあります。 Slack、Instagram、さらにはFacebookでそのような要素に気づいたことでしょう。 自分で作成する方法のガイドを作成しましたが、そのような要素を提供できる優れたVue.jsコンポーネントがあります:vue-content-loader

依存関係

このガイドは、Vue.jsプロジェクトがすでに設定されていることを前提としています。 そうでない場合は、先に進み、 vue-cli3.0とデフォルトのオプションを使用して新しいVueプロジェクトを開始します。 $ vue create my-new-projectを実行し、Enterキーを数回押すだけで十分です。

次に、npmからvue-content-loaderをインストールします。

$ npm install vue-content-loader

注:これはプラグインではなくコンポーネントであるため、ここでmain.jsで何も有効にする必要はありません。

使用法

<template>
<div class="content-wrapper">
    <!-- Displays if myData is not set.
    Options
    speed: Number - How many seconds between pulses of the loader.
    height / width: Number - size of the loader contents.
    primaryColor: String - The color of the elements.
    secondaryColor: String - The color of the pulser.
    animate: Boolean - Whether or not to display the pulser.
    -->
    <content-loader v-if="!myData"
      :speed="2"
      :animate="true"
    ></content-loader>
    <div v-else class="my-real-content">
      <!-- Your real loaded data goes in here. -->
      <p>{{myData}}</p>
    </div>
  </div>
</template>

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

export default {
  components: {
    ContentLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>

Default Content Loader

まあ、それは圧倒的です。 ほんの少し退屈な正方形。 :/ ContentLoaderコンポーネントは、実際には独自のカスタムローダーSVG要素のラッパーであると想定されています。 何?!あなたは悲鳴を上げます。 コンテンツローダー用に自分のSVGSを作成する必要がありますか?

うーん、はい! あなたのためにコードを生成する豪華なオンラインGUIツールがあります! 悪くない、全く!

これが私がその発電機を使って作ったかわいい小さな車の形をしたものです:(ワニを作ろうとしましたが、必要なスキルと細かい運動制御が不足しています)。

<content-loader>
  <circle cx="333.40099117860757" cy="371.67099117860755" r="45.40099117860754"/>
  <circle cx="132.26035793053342" cy="377.5303579305334" r="45.260357930533424"/>
  <circle cx="289.53897688809354" cy="305.8089768880935" r="54.53897688809353"/>
  <rect x="80.04" y="312.09" rx="0" ry="0" width="324" height="66" transform="rotate(0.06, 80.04, 312.09)"/>
  <circle cx="163.7954915950234" cy="303.06549159502345" r="48.79549159502341"/>
  <rect x="159.7" y="255.09" rx="0" ry="0" width="131" height="64" transform="rotate(357.56, 159.7, 255.09)"/>
</content-loader>

まだ努力が多すぎますか? vue-content-loaderには、次のような多くの組み込みスタイルが付属しています。

フェイスブック

Facebook Content Loader

銃弾

Bullet Content Loader

コード

Code Content Loader

リスト

List Content Loader

インスタグラム

Instagram Content Loader

これらは、vue-content-loaderから直接インポートし、content-loaderコンポーネントの代わりに使用するだけで使用できます。

<template>
<div class="content-wrapper">
  <!-- Displays if myData is not set. -->
  <facebook-loader v-if="!myData"
    :speed="2"
  ></facebook-loader>
  <div v-else class="my-real-content">
    <!-- Your real loaded data goes in here. -->
    <p>{{myData}}</p>
  </div>
</div>
</template>

<script>
import { FacebookLoader } from 'vue-content-loader';
// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader

export default {
  components: {
    FacebookLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>