动态循环进度条纯CSS和HTML

文章/答案/技术大牛

发布

1回答

html、css、progress-bar

我正在寻找一个动态的使用CSS的HTML循环进度条，它将从文本文件中拾取值。值将类似于97.56,2.44。因此，我希望第一个值的圆形进度条显示为绿色，在本例中为97.56，而圆的其余部分显示为红色。我在网上读了一些教程，但它们在CSS中都有静态值。我之所以寻找这样一个动态进度条，是因为我的python脚本每隔5分钟就会在cron作业上运行一次，并且这些值会不断更新。任何帮助都将不胜感激。谢谢

浏览 13提问于2017-08-31得票数 1

回答已采纳

1回答

在DOM插入跳过CSS转换动画之后，用javascript更改转换属性的速度太快了吗？

javascript、html、css、twitter-bootstrap

我有一个动态创建的进度条(Bootstrap)，它是在页面加载时尽快创建的，插入到DOM中，然后立即开始执行(该条开始填充)。这个进度条有一个过渡动画:当该条的宽度增加(通过JavaScript)，它将顺利地这样做。进度以离散的步骤进行:假设异步检索4个资源，当每个资源加载时，进度条增加25 %。问题是:进度条所表示的资源加载有时是非常快速的(我怀疑可能涉及一些缓存)。这有时会导致在条形图中立即改变宽度，完全跳过过渡动画和随后的ontransitionend事件(因为没有过渡)。经过艰

浏览 1提问于2020-04-25得票数 0

1回答

动态内容-从哪里开始？

dynamic、html

我想根据对下拉菜单的选择来动态更改的内容。下拉菜单由一个从mysql数据库获取数据的php循环填充。到目前为止，我只熟悉php和html/css。到目前为止，我已经听到了AJAX，JQuery，JavaScript，NOLOH，HTML iframe，纯CSS等等，我真的只想知道去哪里看！

浏览 1提问于2011-06-08得票数 0

回答已采纳

5回答

如何使用纯CSS将HTML5进度元素设置为圆圈/饼

html、css、progress-bar、progress

HTML5引入了一个新的“进度”元素，默认情况下，该元素作为进度条(温度计)呈现。一个非常基本的例子是：我一直在使用javascript进行各种进度循环选项的实验，并且对这里讨论的一些纯CSS方法也印象深刻我很想知道是否有人成功地将CSS应用于“进度”元素，以提供饼图/时钟/圆圈呈现，而不是线性显示？编辑&#

浏览 8提问于2015-05-14得票数 24

回答已采纳

2回答

用HTML/CSS实现最小进度条

html、css

有没有可能在没有Javascript的HTML/CSS中实现一个适合于表格中的单元格的最小进度条(一个带有文本的2色栏)？不需要动态更新进度条。

浏览 3提问于2015-06-26得票数 1

回答已采纳

1回答

最后选择- jQuery可修复的超级菜单

javascript、jquery、html、css、ajax

我看到的所有示例都严重依赖于拉取外部php页面来加载新的选项，但我只需要它来显示子无序列表，而不是动态加载任何内容。有人能帮上忙吗？

浏览 0提问于2014-05-14得票数 0

2回答

圆边框进度条

html、css、svg、css-shapes

如何使用CSS创建这个循环进度条(兼容IE10+、FF、chrome、safari.)？在圆圈周围，有一个小的边框或阴影，根据进度百分比动态变化。如果百分比是100%，边框将完全围绕圆圈填充进度条。

浏览 3提问于2017-01-11得票数 2

回答已采纳

1回答

与step一起使用css calc()

html、css

我们使用了一个纯css基进度条。 background-color: #7d7d7d; left: -50%;} html原因是.progressbar li width是固定在25%上的，我们想要使它基于步骤数的动态。请考虑一下，我们正在构建一个正在动态构建进度条的组件，因此我们找不到实际的步骤数。

浏览 5提问于2016-08-28得票数 6

回答已采纳

1回答

jquery对话栈

jquery、jquery-ui、jquery-ui-dialog

如何在屏幕右端堆叠动态生成的ui对话。类似于 .Notify的内容只是添加了文本描述，我需要在窗口中显示类似表单的内容。HTML: <p&

浏览 2提问于2013-04-23得票数 0

回答已采纳

2回答

如何根据变量值在django html中更改状态栏颜色

javascript、python、html、django、css

我有一个html表格，其中一个单元格是其中status是在远程服务器上运行的服务的状态。已启动或已停止。它包含在html for循环中，以便基于数据结果动态地生成每一行。目前，表的设置方式只是在表中简单地显示为纯文本“已启动”或“已停止”。我想用进度条代替文本。

浏览 1提问于2017-07-24得票数 1

5回答

动态: CSS vs JavaScript

javascript、html、css、dynamic

与相比，JavaScript更具动态性。但是JavaScript为什么比CSS更具动态性呢？JavaScript编码如何以比CSS更好的方式工作？

浏览 1提问于2013-04-14得票数 1

回答已采纳

1回答

在催化剂应用程序中上传进度条

jquery、file-upload、catalyst

对于我的催化剂项目(FastCGI在Apache2下)，我希望有一个上传进度条。表单是用HTML::FormHandler创建的，包含多个文本字段和一个文件上传输入(它不是一个纯文件上传器)。到目前为止，我尝试了和，但都没有成功。表单提交和文件上传仍然有效，但是在没有进度条的情况下，进度条保持在0%。<hea

浏览 2提问于2017-03-01得票数 0

回答已采纳

2回答

在窗体中创建进度条。

progress-bar、formsflow.ai、formsflow

我试图以我的形式创建一个进度条。当我完成不同的字段时，进度条应该被更新，这样当所有的字段都被填充时，进度条就会被完成。我假装会有一个组件来拖放。但它不在组件部分。我能找到在表单中创建进度条的方法吗？

浏览 21提问于2021-12-14得票数 1

2回答

动态进度条

javascript、jquery、html、css

我需要编写一个进度条，这是有一些自定义的最大宽度值，也是一个自定义的进度。我发现了一些与相关的东西，但它缺乏一些功能。HTML： <span style="width:502px"></span></div>div.meter {var end = parseInt(width); var

浏览 0提问于2015-10-15得票数 0

1回答

在Jquery进度条中显示百分比

jquery、ajax、twitter-bootstrap

我在我的页面中有一个动态更新的进度条，我想在它的中间显示百分比，但我不知道怎么做。evt.lengthComputable) { var pct = evt.loaded / evt.total; $("#prog&qu

浏览 13提问于2017-07-27得票数 0

6回答

不使用图像显示进度

jquery、html、css、user-interface

我想设计一个进度条，而不是使用图像(例如动画gif...)。仅仅使用html、css和jquery就可以做到这一点吗？在这里尝试有创意:) 更新:进度百分比无法确定，因此它必须是一个循环

浏览 1提问于2009-08-10得票数 4

1回答

浏览器对引导3进度条的支持

twitter-bootstrap-3、asp.net-mvc-5、progress-bar、browser-support

我正在编写一个MVC 5视图，它需要使用进度条，并且不确定最佳的方法。我希望在以下资源中使用Bootstrap 3进度条：Cross-browser compatibility提前谢谢。

浏览 0提问于2015-01-07得票数 0

回答已采纳

1回答

如何访问javascript中的关键帧和webkit转换？

javascript、css、progress-bar

我想在Html、Javascript和css中创建一个循环进度条。rotate(50deg)}element.style.webkitTransform = "rotate(-2deg)"; transform: rotate(50deg)如何在javascript中做到这一点，以便动

浏览 3提问于2022-03-31得票数 -1

1回答

在大型项目中使用ReactJS实现最快的CSS渲染

javascript、html、css、reactjs、jsx

使用ReactJs呈现CSS的最快方式是自定义CSS还是样式组件CSS包。

浏览 2提问于2019-11-30得票数 0

1回答

无法在angular中使用primeng设置p进度条(不确定)的样式

angular、progress-bar、primeng

无法在angular中使用primeng设置p进度条(不确定)的样式<p-progressBar mode="indeterminate" class="someClass"></p-progressBar>.ui-progressbar.ui-progressbar-indeterminate

浏览 1提问于2018-02-09得票数 1

点击加载更多