草庐IT

Foundation 进度条

runoob 2023-04-06 原文

Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示：

我们可以在 <div> 元素中使用 .progress 类来创建进度条， .meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：

实例

<div class="progress">
  <span class="meter" style="width:70%"></span>
</div>

尝试一下 »

进度条颜色

默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary, .success, 或 .alert:

实例

<div class="progress">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress secondary">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress success">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress alert">
  <span class="meter" style="width:50%"></span>
</div>

尝试一下 »

圆角进度条

.radius 和 .round 类用于为进度条添加圆角效果：

实例

<div class="progress">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress radius">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress round">
  <span class="meter" style="width:50%"></span>
</div>

尝试一下 »

进度条尺寸

可以使用 .small-num 或 .large-num 来修改进度条的宽度， num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间:

实例

<div class="progress large-1">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-6">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-9">
  <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-11">
  <span class="meter" style="width:50%"></span>
</div>

<!-- Default width -->
<div class="progress large-12">
  <span class="meter" style="width:50%"></span>
</div>

尝试一下 »

进度条标签

可以使用 CSS 为进度条添加标签。以下实例中我们添加了<span> 元素来显示百分比：

实例

 <style>
.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
  font-size: 12px;
}
</style>

<div class="progress">
  <span class="meter" style="position:relative;width:75%">
    <span class="percentage">75%</span>
  </span>
</div>

<div class="progress success">
  <span class="meter" style="position:relative;width:50%">
    <span class="percentage">50%</span>
  </span>
</div>

<div class="progress alert">
  <span class="meter" style="position:relative;width:25%">
    <span class="percentage">25%</span>
  </span>
</div>

尝试一下 »
Foundation进度条spanclasshighELE

有关Foundation 进度条的更多相关文章

  1. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  2. ruby - 获取 Ruby Net::HTTP POST 的上传进度 - 2

    我一直在搜索net/http代码，但还没有找到解决方案。我需要执行一个多部分POST请求，我已经弄清楚了，但是在上传中定期注入(inject)一个回调真的很好，这样我就可以增加一个进度条。有谁知道一种方法可以让代码执行HTTPpost期间发送的每X个字节？ 最佳答案 看起来您没有使用Rails，但我认为最简单的方法是从客户端进行。在浏览器设置中，您可以使用Flash(SWFUpload)或仅使用新的XMLHttpRequest内容向新浏览器提供进度条(上传在旧浏览器中仍然有效...只是没有进度条)。它的工作原理与您描述的略有不同，但

  3. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性？ - 2

    大家好，我正在开发一个新的Rails应用程序，我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css，还有它的视觉效果；p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的，如果您对app/assets/stylesheets/

  4. Ruby 在复制文件时显示进度 - 2

    我希望能够在使用Ruby复制文件时显示文件复制操作的进度(当前使用FileUtils.cp)我已经尝试将verbose选项设置为是的，但这似乎只是向我展示了发出的复制命令。我现在正在从命令行运行这个脚本，所以理想情况下我希望能够像SCP在复制文件时那样呈现一些东西，但只要我能，我就不太在意呈现查看进度。 最佳答案 因为我没有足够的代表来编辑答案，所以这是我基于pisswillis答案的版本，我找到了progressbargem我也在我的例子中使用。我已经对此进行了测试，到目前为止它工作正常，但它可以做一些清理工作:require'r

  5. ruby - Sinatra，上传表单中的进度条 - 2

    我正在开发一个Sinatra应用程序，它包含一个上传表单，并带有一个进度条，指示上传完成了多少。该过程，如ryandahl所述,如下:HTTPuploadprogressbarsareratherobfuscated-theytypicallyinvolveaprocessrunningontheserverkeepingtrackofthesizeofthetempfilethattheHTTPserveriswritingto,thenontheclientsideanAJAXcallismadeeverycouplesecondstotheserverduringtheuploa

  6. Ruby Net::FTP 进度条 - 2

    有谁知道在下载文件时从ruby​​的Net::FTP库获取状态更新的方法吗？我正在尝试实现一个Web界面，该界面显示从远程FTP服务器下载文件时剩余百分比的进度条。 最佳答案 供将来引用-我偶然发现了一个解决方案:filesize=ftp.size(filename)transferred=0p"Beginningdownload,filesize:#{filesize}"ftp.getbinaryfile(filename,"#{SOURCE_IMPORT_DIRECTORY}/#{filename}",1024){|data|t

  7. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误，但我不知道如何解决:找不到有效的gem'foundation'(>=0)，原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗？ 最佳答案 如

  8. ruby - 终端或控制台中的就地进度输出 - 2

    当您运行gitclone时，它会就地更新进度。例如，接收到位置变化的对象的百分比。user@athena:~/cloj/src$gitclonegit://git.boinkor.net/slime.gitInitializedemptyGitrepositoryin/home/user/cloj/src/slime/.git/remote:Countingobjects:15936,done.remote:Compressingobjects:100%(5500/5500),done.Receivingobjects:28%(4547/15936),3.16MiB|165KiB/s这

  9. javascript - 更新运行时添加的 JQuery 进度条 - 2

    我在更新jquery进度条时遇到了一些问题。这个进度条在页面加载期间不在文档中，我只是在用户单击按钮时添加它，如下所示:$(this).parent().append('');$(this).parent().children('div.progressbar').show();$(this).parent().children('div.progressbar').progressbar({value:20});然后，使用超时，我正在尝试更新它functionupdateProgressBar(){$('.progressbar').each(function(){myNewValu

  10. java - 服务器端 - 进度条 - 2

    我目前正在开发一个文件转换程序，文件上传后，它会将文件转换为不同的文件格式(ppt、pdf)，这通常需要很长时间，具体取决于文件大小。由于文件转换发生在后端，我希望用户看到文件转换的进度(类似于进度条，例如“正在转换52%的文件”)，无论如何我可以向用户显示当前的进度文件转换(发生在后端)？在文件转换期间，我只能显示状态(以数字表示(由我正在使用的API提供))我不知道从哪里开始有人可以提供一些见解或方法吗？ 最佳答案 如果您使用的是Struts2，请查看ExecuteandWaitInterceptor.它会为您的任务创建新线程，

随机推荐