使用引导进度条的 Rails 动态数据进度条

关键词：

【中文标题】使用引导进度条的 Rails 动态数据进度条【英文标题】：Rails dynamic data progress bar using bootrap progress bar 【发布时间】：2021-10-30 01:01:17 【问题描述】：

您好，任何人都可以帮助尝试获取 bootrap 5 进度条以显示我的会议表中的动态数据吗？ Rails 6.0.4 Ruby 2.7.0p0

我有一张桌子rails g Scaffold meetings name:string start_date:datetime end_date:datetime duration:integer

持续时间是我的 meeting.rb 中的一个计算字段，它保存到我的数据库中

def set_duration
      self.duration = (end_date - start_date).to_i
    end

在我的 meeting.index.erb 我有

<% @meetings.each do |meeting| %>

<td><%= meeting.start_date %></td>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><%= Time.at(meeting.duration).utc.strftime("%H hours and %M minutes ")  %></div>
</div>
<% end %>

我试图显示它，以便我可以看到总共 8 小时或 28800 秒中的总持续时间，但该栏不会显示 bootrab 正在工作，因为我可以在没有动态数据的情况下生成进度条。谁能指出我正确的方向？

代码更新进度条后的截图仍然不会动态出现

【问题讨论】：

【参考方案1】：

Read the document and example well.

style="width: 25%" aria-valuenow="25" 代表进度。因此，您需要计算会议持续时间与 24 小时的百分比。

所以你的Meeting 模型可以有以下方法返回 %

def duration_percent
  duration / 24.hours.to_f * 100
end

并修改您的 ERB 模板以呈现百分比

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: <%= meeting.duration_percent %>%;" aria-valuenow="<%= meeting.duration_percent %>" aria-valuemin="0" aria-valuemax="100"><%= Time.at(meeting.duration).utc.strftime("%H hours and %M minutes ")  %></div</div>
<% end %>

【讨论】：

嗨 Amit Patel 感谢您的帮助，由于某种原因进度条仍然没有显示给我，我添加了添加代码后得到的输出屏幕截图。不知道为什么它不会动态显示但会很好地显示静态进度条？

使用引导进度条以模态显示上传进度

】使用引导进度条以模态显示上传进度【英文标题】：DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】：2015-04-2003:01:02【问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情

长按如何使进度条变化android

...yer调节。系统自带的进度条的颜色比较单调，实际开发中使用较少，可以自定义进度条背景，新建一个progressbarbg.xml文件。gradient可以设置进度条的渐变色，android：endColor和android：startColor可以设置渐变开始和结束的颜色。定义完... 查看详情

选中复选框时动态更改引导进度条值

...【发布时间】：2014-02-0613:21:44【问题描述】：我正在尝试使用引导进度条制作动态清单。这是我的标记代码<divclass="progressprogress-stripedactive"><divclass="progress-ba 查看详情

如何更新引导进度条。

】如何更新引导进度条。【英文标题】：Howtoupdatebootstrapprogressbar.【发布时间】：2016-11-2216:23:07【问题描述】：关于引导进度条的文档说明了如何显示具有默认值和完成值的进度条，但现在如何更新它？那么，更新值和宽度的最... 查看详情

使用倒计时日期保存当前进度 - 进度条引导程序 4

】使用倒计时日期保存当前进度-进度条引导程序4【英文标题】：Savethecurrentprogressionwithcountdowndate-progressbarbootstrap4【发布时间】：2021-06-2704:42:42【问题描述】：我想使用进度条引导程序4创建动态倒计时日期进度我们可以设置百... 查看详情

如何使用 swift 显示带有进度条的 AVAudioPlayer？

】如何使用swift显示带有进度条的AVAudioPlayer？【英文标题】：HowtoAVAudioPlayerwithprogressbarshowusingswift?【发布时间】：2019-01-2413:26:17【问题描述】：我正在使用AVAudioPlayer播放歌曲。我需要一个进度条来显示歌曲的进度。我的问题是... 查看详情

进度条与拖动条的使用学习(代码片段)

（一）进度条常用属性详解：android:max：进度条的最大值android:progress：进度条已完成进度值android:progressDrawable：设置轨道对应的Drawable对象android:indeterminate：如果设置成true，则进度条不精确显示进度android:indeterminateDrawable：设置... 查看详情

第七章文本进度条的实现(代码片段)

文本进度条大家都见过程加载的时候的文本进度条进度条的原理是什么呢？1、采用字符串方式打印可以动态变化的文本进度条2、进度条需要能在一行中逐渐变化问题分析：如何获取一个文本进度条的变化时间呢？1、采用sleep()... 查看详情

带有进度条的 Firebase 数据库

】带有进度条的Firebase数据库【英文标题】：Firebasedatabasewithprogressbar【发布时间】：2018-01-2706:05:45【问题描述】：我有问题。从Firebase数据库加载数据时，我无法将progressbar附加到我的活动中。我尝试通过Asynctask附加进度条，将fi... 查看详情

vc6.0里mfc进度条如何使用

参考技术A演练CProgress7.1进度条的主要功能进度条控制（ProgressControl）主要用来进行数据读写、文件拷贝和磁盘格式等操作时的工作进度提示情况，如安装程序等，伴随工作进度的进展，进度条的矩形区域从左到右利用当前活动... 查看详情

从 angularjs 更改引导进度条宽度

】从angularjs更改引导进度条宽度【英文标题】：Changebootstrapprogress-barwidthfromangularjs【发布时间】：2014-01-1814:58:24【问题描述】：我是Angularjs的新手，当我的控制器中的值发生变化时，我正在尝试更新进度条的宽度。我有类似的东... 查看详情

控制进度条的粗细

...因为在我看来它似乎太厚了。非常感谢。【问题讨论】：使用自定义进度对话框，我的意思是你可以使用自己的图像，否则你无法控制默认进度条的粗细【参考方案1】：将其用于条形样式style="?android:attr/pr 查看详情

如何更改圆形进度条的颜色？

...发布时间】：2011-07-1707:03:54【问题描述】：我在Android上使用循环进度条。我想改变它的颜色。我正在使用"?android:attr/progressBarStyleLargeInverse"风格。那么如何改变进度条的颜色呢。如何自定义样式？另外，风格的定义是什么？【问... 查看详情

增加高度时如何平滑进度条的拐角？

...618:08:38【问题描述】：我正在尝试制作这样的进度条：我使用这个SO帖子来学习如何圆角：Link当您的进度条高度不超过6时效果很好。当我使用以下方法使进度条变大时：progressBar.transform=progre 查看详情

如何使用 Swing Timer 来延迟进度条的加载

】如何使用SwingTimer来延迟进度条的加载【英文标题】：HowtousetheSwingTimertodelaytheloadingofaprogressbar【发布时间】：2013-03-1802:47:34【问题描述】：我需要找到一种方法来使用带有进度条的摇摆计时器。我尝试使用Thread.sleep()，但是当... 查看详情

求linuxqtdesigner进度条的具体实现

...//一般来说这样就会自动进度增长,如果进度条没动,可以使用下面这句bar.update(); 查看详情

网页加载进度条的实现

...说页面还无法准确返回页面实际加载的进度，本文中我们使用jQuery来实现页面加载进度条效果。首先我们要知道的是，目前没有任何浏览器可 查看详情

使用 Util.copyStream 的带有进度条的 FTP - JAVA

】使用Util.copyStream的带有进度条的FTP-JAVA【英文标题】：FTPwithprogressbarusingUtil.copyStream-JAVA【发布时间】：2013-09-2002:56:11【问题描述】：我正在使用Util.copyStream()通过FTP上传文件。它在进度条上显示进度，但是当我尝试通过FTP客户... 查看详情