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

Question

我经常使用引导进度条。附上一个小例子。

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 确实需要重构。