如何制作进度条/容器?

时间:2015-08-13 16:40:50

标签: javascript html css progress-bar progress

我正在创建一个网站,涉及人们将物品存入网站,将有100个项目的上限。我正在寻找一个水平或垂直的进度条,我并不介意,随着物品存入网站而增加。

现在我需要帮助才能让进度条工作,从0到100%。我会担心连接进度条的百分比和稍后存放的项目。

提前致谢!

1 个答案:

答案 0 :(得分:1)

HTML5有一个元素可以做一个非常简单的版本。

使用如下:

<progress value="22" max="100"></progress>

有关此元素的文档为here

根据CanIUseIt.com的浏览器支持是坚如磐石的:

  

以下浏览器完全支持HTML5进展元素:Firefox 16 +,Chrome 8 +,Safari 6+和Opera 11 +。

您可以使用javascript或您喜欢的框架动态更新它,并使用CSS来设置样式。

如果你想让一些东西变得更性感,那么有很多关于这个主题的教程。 Here is one I like.

如果您需要更多帮助,请与我们联系。祝你好运!