jquery：进度条从页面中心增长

Question

我很多时候都在使用bootstrap进度条。附上一个小例子。

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second

完整代码可以在这里找到https://jsfiddle.net/qLgv2Lfm/8/

最近我在网站链接中看到了一个不错的进度条。当我们点击任何链接时，然后进度条从页面的顶部中心增长到两端，意味着左右两侧。我觉得这对我很好看。所以任何人都可以检查链接到网站的进度，并告诉我如何开发这样的进度条。

给出的图片非常精细，然后必须注意到一个非常薄的深​​蓝色线从页面中心顶部生长网络菜单等。

如果我搜索youtube就像进度条那么我们可以得到很多代码示例但是当我搜索链接到网站就像进度条那样我没有写或任何概念。所以任何人都可以讨论如何开发在网站链接，如进度条。感谢

Answer 1

我不喜欢这个问题，因为你没有表现出任何尝试......

但是，只需使用CSS触发过渡。

http://jsfiddle.net/xcWge/1848/

如您所见，我们在loader元素上指定了一个转换，在本例中为square

<div id="square"></div>

CSS：

#square { width: 10px; height: 10px; margin: 100px; /*for centering purposes*/ margin-left:200px; float: left; background: blue; -webkit-transition: width 1s, height 1s, margin 1s; -moz-transition: width 1s, height 1s, margin 1s; -ms-transition: width 1s, height 1s, margin 1s; transition: width 1s, height 1s, margin 1s; }

然后，出于示例目的，我们将hover属性指定为我们的加载状态..

#square:hover { width: 1000px; margin-left: -200px; }

通过一些游戏，你可以做你想要实现的目标。

相关文章：Expand div from the middle instead of just top and left using CSS

编辑：你可以计算添加和删除这些属性的Javascript部分，但是你的setTimeouts确实需要重构。