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/

如您所见，我们在加载器元素上指定了一个转换，在本例中为 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确实需要重构。