唯心主义蠢货的[UI组件_3]Loading加载(css练习)

实现效果

line型

point型

解决的问题

• vue.directive的相关使用
• 练习css制作loading动画
• position踩到的部分坑

---

代码实现

Vue部分

vue部分的结构很简单

• 整体用visible控制是否显示
• 用if else判断loadingStyle分别渲染point型和line型的loading动画
• 对于point型，通过for渲染9个点，然后在css中对点进行keyframes动画
• 对于line型，设置三个div，分别对应三层圈圈

<template>
    <div v-if="visible" id="loadingBg">
        <div class="loadingShow clockAnimation" v-if="loadingStyle == 'point'">
            <div v-for="item in pointNum">
                <div class="point" :style="{ transform:'rotate('+(item*(360/pointNum))+'deg)'}"></div>
            </div>
        </div>
        <div class="loadingShow" v-else-if="loadingStyle == 'line'">
            <div id="loading-ring">
                <div class="outer"></div>
                <div class="middle"></div>
                <div class="inner"></div>
            </div>
        </div>
        <p>{
  { text }}</p>