javascript - 所有视口(viewport)周围的进度条？

Question

我想做一个“全屏”的进度条:一个100% x 100%的边框，刚好填满。不容易解释所以我画了一个。

http://hpics.li/998ef2e

非常感谢您的想法!

Answer 1

我使用四个 div 制作了一个解决方案，我认为这非常接近: https://jsfiddle.net/svArtist/jexb9egm/

var i=0;

var myVar=setInterval(function () {myTimer()}, 10);

function myTimer() {
    i++;
    if(i<=100){
    $("#top").css("width", i+"%");
    }else if(i<=200){
    $("#right").css("height", (i-100)+"%");
    }else if(i<=300){
    $("#bottom").css("width", (i-200)+"%");
    }else if(i<=400){
    $("#left").css("height", (i-300)+"%");
     }else{
     clearInterval(myVar);
    }
}

#main, html, body{
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    overflow:hidden;
}

.loadbar{
    background-color:#f00;
    position:absolute;
}

#top, #bottom{
    height:20px;
}

#left, #right{
    width:20px;
}

#top{
    top:0;
    left:0;
}

#right{
    top:0;
    right:0;
}

#bottom{
    bottom:0;
    right:0;
}

#left{
    bottom:0;
    left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="loader">
        <div id="top" class="loadbar">
        </div>
        <div id="right" class="loadbar">
        </div>
        <div id="bottom" class="loadbar">
        </div>
        <div id="left" class="loadbar">
        </div>
    </div>
</div>

(这里只是从 0 增加到 400，请改用您的进度百分比*4)