ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

用vue写的一个简单的加载模块 页面初始化使用的

2021-04-19 12:02:23  阅读：154  来源： 互联网

标签：初始化 rotate moz transform vue scale webkit animation 加载 


<template>
    <div class='map_loading_vue' :class='{hide:isOpacity}' v-show='isShow'>
        <div class='title'>健坤地图设备管理</div>
        <div class="loader" v-if='isShowLoader'>
            <div class="text">Loading...</div>
            <div class="horizontal">
                <div class="circlesup">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                </div>
                <div class="circlesdwn">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                </div>
            </div>
            <div class="vertical">
                <div class="circlesup">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                </div>
                <div class="circlesdwn">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                </div>
            </div>
        </div>
        <div class='progressbar' :class='{ hide: isHidePage }'>
            <div class='bar' :style='"width:calc("+complete+"% - 10px);"' >
                <span class='completeV'>{{complete}}%</span>
            </div>
        </div>

        <div class='welcomeTitle' :class='{show:isShowWelcome}'>
            <span>欢迎使用</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        complete: {
            type: Number,
            default: 75
        },
        init: {
            type: Function,
            default: ()=>{  }
        }
    },
    watch: {
        complete (v){
            if( v >= 100 ){
                setTimeout(()=>{
                    this.guodu();
                },500)
                // 如果进度完成度超过100了  那就判断为完成了
                setTimeout(()=>{
                    this.completeEnd();
                },3000)
            }
        }
    },
    data (){
        return {
            isOpacity: false,
            isShow: true,
            isShowLoader: true,
            isHidePage: false,
            isShowWelcome: false
        }
    },
    mounted (){

    },
    methods: {

        // 欢迎的过度动画
        guodu (){
            // 隐藏掉加载滚动粒子
            this.isShowLoader = false;
            // 将进度条向下滑动消失
            this.isHidePage = true;
            setTimeout(()=>{
                // 将欢迎使用从下向上弹出
                this.isShowWelcome = true;
            },1000)
        },

        // 完成任务
        completeEnd (){
            // 渐渐隐藏自己
            this.isOpacity = true;
            setTimeout(()=>{
                // 将自己隐藏掉
                this.isShow = false;
                this.init();
            },950)
        }
    }
}
</script>

<style scoped>
    
    .welcomeTitle.show {
        top: 50%;
    }

    .welcomeTitle {
        transition: top 0.75s;
        position:absolute;
        top: 130%;
        left: 50%;
        padding: 20px;
        text-align: center;
        width: 30%;
        transform: translate(-50%,-50%);
        font-size: 40px;
        text-shadow: #13a3a5 1px 0 0, #13a3a5 0 1px 0, #13a3a5 -1px 0 0, #13a3a5 0 -1px 0;
        border-radius: 8px;
    }

    .progressbar.hide {
        animation: progressbarHide 1s;
        animation-fill-mode: forwards;
    }

    @keyframes progressbarHide {
        0%{ bottom: 10% }
        30% { bottom: 15% }
        100% { bottom: -30% };
    }

    .completeV {
        font-size: 33px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        top: 50%;
        text-shadow: #13a3a5 1px 0 0,
                     #13a3a5 0 1px 0, 
                     #13a3a5 -1px 0 0,
                     #13a3a5 0 -1px 0;
        color: #ffffff;
        z-index: 9;
    }

    .progressbar {
        background: #ffffff;
        width: 30%;
        height: 60px;
        border-radius: 8px;
        left: 50%;
        position:absolute;
        transform: translateX(-50%);
        bottom: 10%;
        transition: bottom 0.75s;
    }

    .progressbar .bar {
        background: #13a3a5;
        width: calc(100% - 10px);
        height: 60px;
        border-radius: 8px;
        transform: translate(5px,-12px);
        transition: width 0.25s;
    }
    .progressbar .bar::before {
        content: "";
        background: #54cacc;
        width: 100%;
        height: 60px;
        border-radius: 8px;
        transform: translate(0px,7px);
        position: absolute;
    }
    .progressbar .bar::after {
        content: "";
        background: #13a3a5;
        width: 100%;
        height: 60px;
        border-radius: 8px;
        position:absolute;
    }

    .title {
        font-size: 33px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        top: 15%;
        text-shadow: #13a3a5 1px 0 0,
                     #13a3a5 0 1px 0, 
                     #13a3a5 -1px 0 0,
                     #13a3a5 0 -1px 0;
    }

    .map_loading_vue.hide {
        opacity: 0;
    }

    .map_loading_vue { 
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        background: #403833;
        font-family: 'Open Sans';
        font-weight: 100;
        color:#f2f2f2;
        font-size:100%;
        margin:0em;
        padding:0em;
        width:100%;
        height:100%;
        position:absolute;
        top: 0;
        z-index: 99999;
        opacity: 1;
        transition: all 1s;
    }

    /* Start the loader code, first, let's align it the center of screen */
    .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -mos-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align:center;
    /* disable selection and cursor changes */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor:default;
    }

    /* Text align it the center of screen and connect the looped animation for 2 seconds */
    .text{
        position: absolute;
        left: -1.3em;
        top: -1.7em;
        -webkit-animation: text 2s infinite;
        -moz-animation: text 2s infinite;
        -moz-animation: text 2s infinite;
        -ms-animation: text 2s infinite;
        -o-animation: text 2s infinite;
        animation: text 2s infinite;
    }

    /* Set for the first layer vertical position */
    .vertical{
        position:absolute;
        top: -1.84em;
        left: -0.4em;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    /* Set for the second layer horizontal position */
    .horizontal{
        position:absolute;
        top:0em;
        left:0em;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* The next two classes do mirror for animation */
    .circlesup{
        position:absolute;
        top: -4.7em;
        right: 12.1em;
    }

    .circlesdwn{
        position:absolute;
        top:2.5em;
        right:-13.5em;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    /* Create a container for our circles, rotate it 45 degrees and set animation*/
    .circle {
        position: absolute;
        width: 15em;
        height: 15em;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: orbit 2s infinite;
        -moz-animation: orbit 2s infinite;
        -moz-animation: orbit 2s infinite;
        -ms-animation: orbit 2s infinite;
        -o-animation: orbit 2s infinite;
        animation: orbit 2s infinite;
        z-index:5;
    } 

    /* Style's of our circles */
    .circle:after {
        content: '';
        position: absolute;
        width: 2em;
        height: 2em;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
        border-radius: 100%;
        background: #13A3A5; /* Pick a color 1*/
    }

    .circle:nth-child(2) {
        -webkit-animation-delay: 100ms; 
        -moz-animation-delay: 100ms; 
        -ms-animation-delay: 100ms; 
        -o-animation-delay: 100ms; 
        animation-delay: 100ms;
        z-index:4;
    }

    .circle:nth-child(2):after  {
        background: #56bebf; /* Pick a color 2*/
        -webkit-transform: scale(0.8,0.8);
        -moz-transform: scale(0.8,0.8);
        -ms-transform: scale(0.8,0.8);
        -o-transform: scale(0.8,0.8);
        transform: scale(0.8,0.8);
    }

    .circle:nth-child(3) {
        -webkit-animation-delay: 225ms; 
        -moz-animation-delay: 225ms; 
        -ms-animation-delay: 225ms; 
        -o-animation-delay: 225ms; 
        animation-delay: 225ms; 
        z-index:3;
    }

    .circle:nth-child(3):after  {
        background: #ffa489; /* Pick a color 3*/
        -webkit-transform: scale(0.6,0.6);
        -moz-transform: scale(0.6,0.6);
        -ms-transform: scale(0.6,0.6);
        -o-transform: scale(0.6,0.6);
        transform: scale(0.6,0.6);
    }

    .circle:nth-child(4) {
        -webkit-animation-delay: 350ms; 
        -moz-animation-delay: 350ms; 
        -ms-animation-delay: 350ms; 
        -o-animation-delay: 350ms; 
        animation-delay: 350ms; 
        z-index:2;
    }

    .circle:nth-child(4):after  {
        background: #ff6d37; /* Pick a color 4*/
        -webkit-transform: scale(0.4,0.4);
        -moz-transform: scale(0.4,0.4);
        -ms-transform: scale(0.4,0.4);
        -o-transform: scale(0.4,0.4);
        transform: scale(0.4,0.4);
    }


    .circle:nth-child(5) {
        -webkit-animation-delay: 475ms; 
        -moz-animation-delay: 475ms; 
        -ms-animation-delay: 475ms; 
        -o-animation-delay: 475ms; 
        animation-delay: 475ms; 
        z-index:1;
    }

    .circle:nth-child(5):after  {
        background: #DB2F00; /* Pick a color 5*/
        -webkit-transform: scale(0.2,0.2);
        -moz-transform: scale(0.2,0.2);
        -ms-transform: scale(0.2,0.2);
        -o-transform: scale(0.2,0.2);
        transform: scale(0.2,0.2);
    }

    /* Animation keys */
    @-webkit-keyframes orbit {
        0%        { -webkit-transform:rotate(45deg); } 

        5%        { -webkit-transform:rotate(45deg);
                -webkit-animation-timing-function: ease-out; } 

        70%        { -webkit-transform:rotate(405deg); 
                -webkit-animation-timing-function: ease-in; }

        100%    { -webkit-transform:rotate(405deg); } 
    }

    @-moz-keyframes orbit {
        0%        { -moz-transform:rotate(45deg); } 

        5%        { -moz-transform:rotate(45deg);
                -moz-animation-timing-function: ease-out; } 

        70%        { -moz-transform:rotate(405deg); 
                -moz-animation-timing-function: ease-in; }

        100%    { -moz-transform:rotate(405deg); } 
    }
    @-ms-keyframes orbit {
        0%        { -ms-transform:rotate(45deg); } 

        5%        { -ms-transform:rotate(45deg);
                -ms-animation-timing-function: ease-out; } 

        70%        { -ms-transform:rotate(405deg); 
                -ms-animation-timing-function: ease-in; }

        100%    { -ms-transform:rotate(405deg); } 
    }

    @-o-keyframes orbit {
        0%        { -o-transform:rotate(45deg); } 

        5%        { -o-transform:rotate(45deg);
                -o-animation-timing-function: ease-out; } 

        70%        { -o-transform:rotate(405deg); 
                -o-animation-timing-function: ease-in; }

        100%    { -o-transform:rotate(405deg); } 
    }

    @keyframes orbit { 
        0%        { transform:rotate(45deg); } 
        
        5%        { transform:rotate(45deg);
                animation-timing-function: ease-out; } 

        70%     { transform:rotate(405deg); 
                animation-timing-function: ease-in; }

        100%    { transform:rotate(405deg); } 
    }


    @-webkit-keyframes text {
        0%        {-webkit-transform:scale(0.2,0.2);
                -webkit-animation-timing-function: ease-out; } 

        40%,60%{ -webkit-transform:scale(1,1); 
                -webkit-animation-timing-function: ease-out;  }

        70%,100%{ -webkit-transform:scale(0.2,0.2);  } 
    }

    @-moz-keyframes text {
        0%        {-moz-transform:scale(0.2,0.2);
                -moz-animation-timing-function: ease-out; } 

        50%        { -moz-transform:scale(1,1); 
                -moz-animation-timing-function: ease-out;  }

        60%        { -moz-transform:scale(1,1); 
                -moz-animation-timing-function: ease-out;  }

        100%    { -moz-transform:scale(0.2,0.2);  }     
    }

    @-mos-keyframes text {
        0%        {-mos-transform:scale(0.2,0.2);
                -mos-animation-timing-function: ease-out; } 

        50%        { -mos-transform:scale(1,1); 
                -mos-animation-timing-function: ease-out;  }

        60%        { -mos-transform:scale(1,1); 
                -mos-animation-timing-function: ease-out;  }

        100%    { -mos-transform:scale(0.2,0.2);  } 
    }

    @-o-keyframes text {
        0%        { -o-transform:scale(0.2,0.2);
                -o-animation-timing-function: ease-out; } 

        50%        { -o-transform:scale(1,1); 
                -o-animation-timing-function: ease-out;  }

        60%        { -o-transform:scale(1,1); 
                -o-animation-timing-function: ease-out;  }

        100%    { -o-transform:scale(0.2,0.2);  } 
    }

    @keyframes text {
        0%        { transform:scale(0.2,0.2);
                animation-timing-function: ease-out; } 

        50%        { transform:scale(1,1); 
                animation-timing-function: ease-out;  }

        60%        { transform:scale(1,1); 
                animation-timing-function: ease-out;  }

        100%    { transform:scale(0.2,0.2);  } 
    }
</style>

 

引入也很简单

 

<comp-maploading :complete='complete'></comp-maploading>

　

搞定！

 

标签：初始化,rotate,moz,transform,vue,scale,webkit,animation,加载
来源： https://www.cnblogs.com/liao1992/p/14676231.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有