console 命令行工具 X clear

console

<html>
<body>
    <!-- <div class="test">
        导入中
        <span class="s1">。</span>
        <span class="s2">。</span>
        <span class="s3">。</span>
    </div> -->
    <div id="loadBar" class="loading">
        <div class="title">Import ...</div>
        <div class="bar"></div>        
    </div>
</html>

body{
    height: 500px;
    border: 1px solid red;
}
.test span{
    display: inline-block;
    color: red;
    animation: jump 1s 0s ease-in-out infinite;
}
.test .s1{
    animation-delay: 1000;
}
.test .s2{
    animation-delay: 1150ms;
}
.test .s3{
    animation-delay: 1300ms;
}
@keyframes jump{
    0%,100%{
        transform: translateY(0)
    }
    50%{
        transform: translateY(-15px)
    }
}
#loadBar{
    display: none;
    border:1px solid #ccc;
    width: 200px;
    height: 20px;
    position:absolute;
    left:0;right: 0;
    top:0;bottom:0;
    margin: auto;
}
#loadBar.loading{
    display: block;
}
#loadBar .bar{
    
    height: 20px;
    position:absolute;
    width:0;
    background:#fec15f;
    top:0;
    z-index: 0;
}
#loadBar.loading .bar{
    animation:bar 5s linear infinite;
}
.title{
    position: absolute;
    z-index: 4;
    width: 100%;
    text-align: center;
}
@keyframes bar{
    0%{
        width:0px;
    }
    100%{
        width:200px
    }
}

本项目引用的自定义外部资源

jquery.js