jquery - jQuery:进度栏从页面中心开始增长

我很多时间都在使用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，那么我们可以获得很多代码示例，但是当我像进度条一样在网站中搜索链接时，则没有任何文字或任何概念。这样任何人都可以在此问题上进行讨论，例如如何在进度条之类的网站中开发链接。谢谢

最佳答案

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

但是，只需在触发转换的情况下使用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确实需要重构。

关于jquery - jQuery:进度栏从页面中心开始增长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44136772/