如何在他们的网站上取得像flipkart这样的跟踪进度条

Question

如何使用Flipkart等进度栏进行订单跟踪。 从订购到交付的产品示例。 如何制作这样的进度吧？

Answer 1

将来您需要在问题中显示您尝试过的代码。

这是一个基本的进度条，可以帮助您开始。

我还强烈建议Jqueryui的进度条作为开始在这里查看它的好地方：https://jqueryui.com/progressbar/

小提琴：https://jsfiddle.net/lesson8/dZbmS/

   <div id="progress">
        <span id="percent">40%</span>
        <div id="bar"></div>
    </div>

//的js

 $(document).ready(function () {
    $("#progress").mouseover(loopLi);
});

        function loopLi() { // this code is executed every 1 seconds:
            var i = 0;
            setInterval(function () {
                if (i != 101) {
                    $("#percent").html(i + "%");
                    $("#bar").css('width', i + '%');
                    i++;
                }
            }, 100);
        }

// CSS

#progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 padding: 3px;
}

#percent {
 position: absolute;   
 left: 50%;
}

#bar {
 height: 20px;
 background-color: green;
 width: 40%;
}