Question

我想制作一个全屏＆＃34;进度条：100％x 100％的边框，只需填写。不容易解释，所以我快速抽签。

非常感谢你的想法！

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代替）

Answer 2

虽然我从未见过这样做，但你可以使用在页面加载时消失的Div来创建此效果。基本上，将纯色作为背景，并在每一侧使用白色div（左上到右上，右上到右下，右下到左下，左下到左上），在加载完成时收缩。这与彩色条加载＆＃39;的效果相同。在屏幕上。

对于纯粹的美容效果，这可能是很多工作。

所有视口周围的进度条？

2 个答案: