Vue加載中動(dòng)畫組件使用方法詳解

更新時(shí)間：2022年03月04日 14:26:46 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了Vue加載中動(dòng)畫組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue加載中動(dòng)畫組件的使用，供大家參考，具體內(nèi)容如下

（模仿ant-design加載中樣式）效果圖如下：

①創(chuàng)建Loading.vue組件：

<template>
? <div class="m-spin-dot">
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? ? <span class="u-dot-item"></span>
? </div>
</template>
<script>
export default {
? name: 'Loading'
}
</script>
<style lang="less" scoped>
.m-spin-dot {
? // 水平垂直居中
? position: relative;
? top: calc(50% - 18px);
? margin: 0 auto;
? width: 36px;
? height: 36px;
? transform: rotate(45deg);
? -ms-transform: rotate(45deg); /* Internet Explorer */
? -moz-transform: rotate(45deg); /* Firefox */
? -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
? -o-transform: rotate(45deg); /* Opera */
? animation: rotate 1.2s linear infinite;
? -webkit-animation: rotate 1.2s linear infinite;
? @keyframes rotate {
? ? 100% {transform: rotate(405deg);}
? }
? .u-dot-item { // 單個(gè)圓點(diǎn)樣式
? ? position: absolute;
? ? width: 10px;
? ? height: 10px;
? ? background: @mainColor;
? ? border-radius: 50%;
? ? opacity: .3;
? ? animation: spinMove 1s linear infinite alternate;
? ? -webkit-animation: spinMove 1s linear infinite alternate;
? ? @keyframes spinMove {
? ? ? 100% {opacity: 1;}
? ? }
? }
? .u-dot-item:first-child {
? ? top: 0;
? ? left: 0;
? }
? .u-dot-item:nth-child(2) {
? ? top: 0;
? ? right: 0;
? ? animation-delay: .4s;
? ? -webkit-animation-delay: .4s;
? }
? .u-dot-item:nth-child(3) {
? ? bottom: 0;
? ? right: 0;
? ? animation-delay: .8s;
? ? -webkit-animation-delay: .8s;
? }
? .u-dot-item:last-child {
? ? bottom: 0;
? ? left: 0;
? ? animation-delay: 1.2s;
? ? -webkit-animation-delay: 1.2s;
? }
}
</style>

②在要使用的頁面引用：

import Loading from '@/components/Loading'
components: {
? ? Loading
}
<div :class="['m-area', {'loading': isLoading}]"
?? ?<Loading />
</div>
.m-area {
?? ?margin: 0 auto;
?? ?width: 500px;
?? ?height: 400px;
?? ?background: #FFFFFF;
}
.loading { // 加載過程背景虛化
?? ?background: #fafafa;
?? ?pointer-events: none; // 屏蔽鼠標(biāo)事件
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
加載

相關(guān)文章

Vue對(duì)話框組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue對(duì)話框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue antd的from表單中驗(yàn)證rules中type的坑記錄
這篇文章主要介紹了vue antd的from表單中驗(yàn)證rules中type的坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue-cli初始化項(xiàng)目中使用less的方法
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫基礎(chǔ)代碼、快速搭建開發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧
2018-08-08
基于vue和bootstrap實(shí)現(xiàn)簡(jiǎn)單留言板功能
這篇文章主要為大家詳細(xì)介紹了基于vue和bootstrap實(shí)現(xiàn)簡(jiǎn)單留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
vue子組件如何使用父組件傳過來的值
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Element Tooltip 文字提示的使用示例
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vite+vue3項(xiàng)目解決低版本兼容性問題解決方案(Safari白屏)
這篇文章主要介紹了vite+vue3項(xiàng)目解決低版本兼容性問題（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下
2024-11-11
一文帶你上手Vue新的狀態(tài)管理Pinia
Vuex 作為一個(gè)老牌 Vue 狀態(tài)管理庫，大家都很熟悉了，Pinia 是 Vue.js 團(tuán)隊(duì)成員專門為 Vue 開發(fā)的一個(gè)全新的狀態(tài)管理庫，本文就來講講它的具體使用吧
2023-04-04
在vscode里使用.vue代碼模板的方法
本篇文章主要介紹了在vscode里使用.vue代碼模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04