私は非常に怠惰です。 実際、とても怠惰なので、私はデフォルトでスピナーのようなちっぽけなコンポーネントのパッケージをダウンロードします。 まあ、怠惰と、何らかの理由で私のカスタムスピナーが常にグリッチであるという事実と相まって。 これの利点は、たまにあなたが望むことを正確に実行し、他には何もしない単純なパッケージに遭遇することです。 vue-spinner-componentと入力します。 スピナーです。 必要なものの基本を実行するだけの小さなもので、それ以上のものはありません。

インストール

vue-spinner-componentをVue.jsプロジェクトにインストールします。

# Yarn
$ yarn add vue-spinner-component

# or NPM
$ npm install vue-spinner-component --save

使用法

INeedASpinner.vue
<template>
  <div>
    <p>Something is doing things.</p>
    <spinner></spinner>
  </div>
</template>

<script>
import Spinner from 'vue-spinner-component/src/Spinner.vue';

export default {
  components: {
    Spinner
  }
}
</script>

もちろん、カスタマイズできるものがいくつかあります。 しかし、基本的なことだけです。

スピナーサイズ

スピナーの幅と高さ(ピクセル単位)。 これはCSSでも設定できます。

<spinner :size="20"></spinner>

スピナートラック幅

スピナートラックの幅(ピクセル単位)。

<spinner :depth="20"></spinner>

スピナーカラー

スピナーの16進色。

<spinner color="#F9EC31"></spinner>

スピナースピード

スピナーが完全に回転するのにかかる時間(秒単位)。

<spinner :speed="1.5"></spinner>

スピナー方向

スピナーが時計回りまたは反時計回りに回転するかどうか。

<spinner :clockwise="true"></spinner>