html - 如何创建动画状态栏

Question

我不确定你怎么称呼这些东西。我称它们为动画状态栏。它们就像进度条，但它们旨在指示某事的状态，这不一定以连续的方式进行。进度条非常适合指示不断前进并预计在短时间内完成的事情的进度。状态栏适用于包裹的交付状态。当您观看状态栏时，您不会期望状态会不断变化。相反，您去该站点检查状态，记下它的位置，然后离开并稍后再回来。但是，它们仍然可以被动画化。我在 Wish 网站上看到过类似这样的动画状态栏：

http://www.shahspace.com/status-bar/

它在页面加载时动画。它从初始状态开始并移动到当前状态。然后它停止。

我正在寻找一种简单的 HTML/CSS 方式来实现这样的东西。有谁知道这样的事情是如何完成的（我之前已经看过很多次了，所以我知道它有一个设计模式）？任何代码示例或对解释它的文章的引用？（在栏上有状态检查点也很好。）

谢谢。

标签： htmlcssanimationstatusbar