+++
date = "2022-01-14"
tags = ["vue"]
title = "vueでloadingを作る"
slug = "vue"
+++

```sh
$ yarn add vue-loading-template
```

https://github.com/jkchao/vue-loading

demo : https://jkchao.github.io/vue-loading/

ローディング処理は`v-show`で変数を指定すればOKです。

今回はボタンをクリックすると`name`に文字列を入れる処理が入るのですが、その処理まで`1.2s`待機するようにしています。その間、ローディングが表示される仕組み。

```js:src/App.vue
<template>
	<div id="app">
			<Loading v-show="loading">
				<vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading>    
			</Loading>
			<button @click="picker" >start</button>
			<p v-show="!loading">{{ name }}</p>
	</div>
</template>

<script>
import { VueLoading } from 'vue-loading-template';
export default {
	data() {
		return {
			name:"",
			loading: false
		}
	},
	components: {
		VueLoading
	},
	methods: {
		picker: function(){
			this.loading = true;
			setTimeout(() => {
				// ここに処理	
				this.name = "test";
				this.loading = false;
			}, 1200);
		}
	}
}
</script>
```

```js:src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')
```