Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。
SpinKitというのもあるそうなので、そっちを使ったときの備忘録
SpinKitは、vue用のライブラリもあるよう(vue-spinkit)
SpkinKit(vue-spinkitなし)
インストール
$ npm install --save spinkit
SCFでコンポーネントを作る
SkipKitにはいろんな種類があるけど、three-bounceの例。
全部は使わないので、部分的にインポートして使うのが良さそう。
<template> <div class="sk-three-bounce"> <div class="sk-child sk-bounce1"></div> <div class="sk-child sk-bounce2"></div> <div class="sk-child sk-bounce3"></div> </div> </template> <script lang="ts"> import { Component, Vue } from "nuxt-property-decorator"; @Component export default class LoadingBounce extends Vue {} </script> <style lang="scss" scoped> // Import SpinKit $spinkit-spinner-margin: 60px auto; $spinkit-size: 60px; $spinkit-spinner-color: rgba(white, 0.8); @import "~spinkit/scss/spinners/7-three-bounce.scss"; </style>
ざっくりした手順は、こんな感じ
- デモサイトをみて、使いたいのを選ぶ
- Githubのexamlesから選んだサンプルを見つける
- サンプルのUsage部分のHTMLを
<template>にコピペ <style>部分にサンプルのscssをimport- サイズや色などはscssのvariablesを変更して、
@import前に書く
variablesの種類とデフォルトはこんな感じらしい。
$spinkit-spinner-margin: 40px auto !default; $spinkit-size: 40px !default; $spinkit-spinner-color: #333 !default;
SpinKit/_variables.scss at master · tobiasahlin/SpinKit
SpkinKit(vue-spinkitあり)
インストール
$ npm install --save vue-spinkit
pluginsファイルを作る
plugins/vue-spinkit.tsを以下の内容で作成
import Vue from "vue"; import Spinner from "vue-spinkit"; Vue.component("Spinner", Spinner);
nuxt.config.tsに設定
const config: NuxtConfiguration = { // ...略 plugins: ["~/plugins/vue-spinkit"], // ...略 }
Pageでvue-spinkitのコンポーネントを使う
<Spinner name="circle" color="red"/>
こんな感じで<Spinner>タグをいれればOK。
種類や色は属性で指定する感じ。
以上！！
