1：创建一个Vue组件：在Vue项目中创建一个等待加载动画的组件。可以使用命令行工具或手动创建一个.vue文件，命名为Loading.vue
2：编写组件模板：在Loading.vue文件中，编写组件的模板。这个模板定义了等待加载动画的结构和样式。
<template>
<div class="loading-container">
<!-- 等待加载动画的内容 -->
</div>
</template>
3：添加样式：在组件的<style>部分，添加CSS样式来定义加载动画的外观和动画效果。
<style>
.loading-container {
/* 等待加载容器的样式 */
}
</style>
4：添加动画效果：在CSS样式中，使用@keyframes规则定义加载动画的动画效果。
<style>
@keyframes spin {
/* 定义加载动画的动画效果 */
}
</style>
5：添加组件逻辑：在组件的<script>部分，可以添加一些组件的逻辑代码。例如，定义组件的属性和方法。
<script>
export default {
name: 'Loading',
/* 组件的属性和方法 */
};
</script>
6：在应用中使用组件：在需要显示等待加载动画的地方，使用<loading></loading>标签来引入并使用Loading组件。
<template>
<div>
<!-- 其他应用内容 -->
<loading v-if="isLoading"></loading>
</div>
</template>
使用了一个名为isLoading的变量来控制等待加载动画的显示和隐藏。可以根据实际需要使用适当的条件来显示加载动画。
以下是一个简单的示例demo
<template>
<div class="loading-container">
<div class="loading-spinner"></div>
<div class="loading-text">{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
message: '加载中...', // 自定义加载中文本
};
},
};
</script>
<style>
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.loading-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
animation: spin 1s linear infinite;
}
.loading-text {
margin-top: 10px;
font-size: 16px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
在这个示例中，创建了一个名为 Loading 的Vue组件。组件包含一个加载容器（loading-container）和一个旋转的加载动画（loading-spinner），以及一个显示加载文本的元素（loading-text）。
通过CSS的@keyframes规则，定义了一个旋转动画，将其应用于加载动画元素。
要在应用中使用这个等待动画组件，可以在Vue实例中引入和注册该组件，然后在需要显示等待动画的地方使用<loading></loading>标签。
