zoukankan      html  css  js  c++  java
  • vue——loading组件

    <template>
        <div class="loading" :style="{height:loadingRadiusVal+'px',loadingRadiusVal+'px'}"> 
            <div v-for="(dotNum, index) in dotNums" :key="index" :style="dotTransform(index, dotNums)"> 
                <span :style="dotAimation(index, dotNums)"></span> 
            </div> 
        </div>
    </template>

    js

    <script>
        export default{
            props:{
                loadingRadiusVal: { type: Number,  default: 100 }, 
                dotRadiusVal: { type: Number,  default: 20 }, 
                dotColorVal: { type: String,  default: '#f00' }, 
                dotNums: { type: Number,  default: 10 }
            },
            data(){
                return{
    
                }
            },
            methods:{
                dotTransform(idx,dotNums){
                    let rad = 2 * Math.PI / dotNums * idx; 
                    let dotX = Math.cos(rad) * (this.loadingRadiusVal / 2); 
                    let dotY = Math.sin(rad) * (this.loadingRadiusVal / 2); 
                    return { transform: `translate(${dotX}px,${dotY}px)`,height: this.dotRadiusVal+'px',this.dotRadiusVal+'px'};
                },
                dotAimation(idx,dotNums){
                    let delayTime = `${-1*(1+idx)*1/dotNums}s`;
                    return{
                        animationDelay:delayTime,
                        background:this.dotColorVal
                    }
                }
            }
        }
    </script>

    css

    <style>
        div.loading{
            position: relative;
            margin: 0 auto;
            font-size: 0;
            border-radius: 50%;
            transform-origin: 50%;
        }
        div.loading div{
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 100%;
        }
        span{
            display: block;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            animation: ball 1s infinite ease-in-out;
        }
        @keyframes ball{
            0%{
                opacity: 1;
                transform: scale(1);
            }
            20%{
                opacity: 1;
            }
            80%{
                opacity: 0;
                transform: scale(0);
            }
        }
    </style>
  • 相关阅读:
    linux定时器的使用
    6410 spi总线
    6410 spi 设备驱动
    qtcreator 安装后不能显示菜单
    基于Tiny 6410的内核移植 (NAND FLASH 、UBIFS篇)
    有关ajax跨域问题
    sqlmap的安装
    C# 连接数据库的配置方法
    初识Markdown
    ASP.NET 使用Ueditor富文本编辑器
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/9436093.html
Copyright © 2011-2022 走看看