この6つのVueを使用してアニメーションライブラリをロードし、Webサイトのジャンプ率を削減します.

この6つのVueを使用してアニメーションライブラリをロードし、Webサイトのジャンプ率を削減します.
人々が私たちのウェブサイトを離れるのを阻止する方法の一つは、壊れているのではなく、私たちのウェブページがロードされていることを知らせる視覚的なフィードバックを追加することです.視覚的なフィードバックは人々の注目を集めているので、待機時間は静的なスクリーンよりずっと短いようです.微調整アニメーションを追加しても、実際の進捗バーを追加しても、美しいビジュアル要素を提供することで、Webサイトのパフォーマンスが向上し、訪問者がより良い体験をすることができます.Vue開発者にとって、似たようなライブラリがたくさんあります.本文の中で、6つの私の最も好きなことを分かち合います.1. Vue Simple Spinner github:https://dzwillia.github.io/vue-simple-spinner/examples/名前の通り、これは非常に簡単なコンポーネントですが、機能は依然として非常に強力です.Vue Simple Spinnerは、カスタマイズ可能なロードスタイルを提供します.propsを使用すると、対応するスタイルを制御できます.

Size

Background and foreground colors

Speed

Label Text

Much more...インストールコマンド:

npm install vue-simple-spinner --save. 

次に、コンポーネントにインポートし、テンプレートで宣言し、必要なpropsを変更します.

import VueSimpleSpinner from 'vue-simple-spinner'
export default {
   components: { 
      VueSimpleSpinner
   }
}
</code></pre> 
  <p><strong>2. Vue Radial Progress</strong></p> 
  <p>github   ：https://github.com/wyzantinc/vue-radial-progress<br>                       ，Vue Radial Progress        。<br> Vue Radial Progress                         。  ，                  。<br>        ，           SVG     ，                  ，       。<br>   ：</p> 
  <pre><code>npm install --save vue-radial-progress
</code></pre> 
  <p>  ，                   </p> 
  <pre><code><template>
  <radial-progress-bar :diameter="200"
                       :completed-steps="completedSteps"
                       :total-steps="totalSteps">
   <p>Total steps: {
    { totalSteps }}</p>
   <p>Completed steps: {
    { completedSteps }}</p>
  </radial-progress-bar>
</template>

<script>
import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },

  components: {
    RadialProgressBar
  }
}

画像3.Vue Loading Overlay
github: https://github.com/ankurk91/vue-loading-overlay **Vue Loading Overlay**は、フルスクリーンでコンポーネントをロードするための理想的なソリューションです.たとえば、アプリケーションにダッシュボードが含まれており、すべてのデータがロードされてからユーザーにあちこちクリックさせる場合、このライブラリは便利です.このライブラリのもう一つの使いやすい特性は、ロード時にユーザーがマスクをクリックすると、ロードをキャンセルし、実行中のタスクをキャンセルできるイベントをトリガーすることです.この機能を追加すると、ユーザーがタスクのロードと終了に時間がかかるかどうかを自分で決定できます.これは、ページを離れる必要がないことを意味します.インストールコマンド:

npm install --save vue-loading-overlay

次に、Loading Overlay libraryの使用例を示します.

    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }

画像4.Vue Progress Path
githubアドレス:https://github.com/Akryum/vue-progress-path Vue Progress Pathは最もポピュラーなロードライブラリの一つです.Vue CoreチームメンバーのGuillaume Chauによって作成され、これも私が一番好きなツールの一つです.SVGを使用すると、Vue Progress Pathは成形の進捗バーを作成します.いくつかの内蔵形状を持っていますが、最も強力な機能は私たち自身のSVG形状を伝えることです.これは無限の可能性を意味します.npm i--save vue-progress-pathを使用してプロジェクトに追加し、src/mainにファイルをグローバルに追加します.jsファイルにあります.

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'

Vue.use(VueProgress, {
  // defaultShape: 'circle',
})

次に、コンポーネントに進捗pathを追加する方法を見てみましょう.

このライブラリにはもう一ついいところがあります.スタイルを変更するにはpropsを使わずにCSSコードを使ってスタイルを編集する必要はありません.

.vue-progress-path path {
  stroke-width: 12;
}

.vue-progress-path .progress {
  stroke: red;
}

画像5.Vue Loading Button
githubアドレス:https://github.com/shwilliam/vue-loading-button Vue Loading Buttonは、一部のコンテンツがロードされていることをユーザーに表示する簡単で効果的な方法です.ボタンがクリックされたときにターンテーブルアニメーションを追加するだけです.しかし、スムーズなアニメーションがあれば、シームレスな外観を作成し、Webサイトを流行させることができます.インストール:

npm install --save vue-loading-button

例:

import VueLoadingButton from 'vue-loading-button'

export default {
  components: {
    VueLoadingButton,
  }
}

画像6.TB Skeleton
githubアドレス:https://github.com/anthinkingcoder/tb-skeleton 画像TBSheletonの体験はとてもいいです.しかし、これはかなり煩雑なコードが必要であり、合理的な計画要素も必要です.この点を理解する最善の方法は例を書くことだと思います.まず、npm install--save tb-skeletonを使用してインストールします.次に、以下の内容をsrc/mainに追加する.jsファイルにあります.

import skeleton from 'tb-skeleton'
import  'tb-skeleton/dist/skeleton.css'
Vue.use(skeleton)

次に、TBSheletonドキュメントのスケルトンコンポーネントの例を示します.

```yaml


  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }