html - Bootstrap jquery垂直进度条设置-6ren

html - Bootstrap jquery垂直进度条设置

转载作者：行者123 更新时间：2023-11-28 00:27:44

25

4

我正在尝试在 Bootstrap 中设置进度条。我一直在研究代码，如果我以正确的方式做到这一点，我只是在寻找第二个意见。或者有更好的方法吗？

这是我的代码:

$(".language-element").each(function() {
  $(this).waypoint(function() {
    var progressBar = $(".progress-bar");
    progressBar.each(function(indx) {
      $(this).css("width", $(this).attr("aria-valuenow") + "%");
    });
  }, {
    triggerOnce: true,
    offset: 'bottom-in-view'
  });
});

.language-section {
  padding-top: 100px;
}

.language-section img {
  padding-right: 50px;
}

.language-details {
  position: relative;
}

.language-details p {
  display: inline-block;
  margin-bottom: 20px;
}

.language-element .progress {
  height: 140px;
  width: 80%;
  margin: 0;
  border-radius: 0;
  position: relative;
  background: transparent;
  box-shadow: none;
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.language-element .progress-bar {
  position: relative;
  z-index: 1;
  box-shadow: none;
  background-color: #15b9e5;
}

.language-element .progress-bar::after {
  content: "";
  display: block;
  height: 136px;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 100%;
  background-color: #fff;
}

.language-element .progress-value {
  width: 90%;
  height: 90%;
  font-size: 14px;
  color: #777777;
  text-transform: capitalize;
  font-weight: 500;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  z-index: 1;
}

.language-element .progress h3 {
  width: 90%;
  height: 90%;
  font-size: 14px;
  color: #777777;
  text-transform: capitalize;
  font-weight: 500;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: -15px;
  left: -30px;
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<section class="language-section">
  <div class="container">
    <div class="row">

      <div class="col-md-6 language-details">

        <div class="row">

          <div class="language-element">

            <div class="col-md-4">
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-value">50%</div>
                <h3>Geram</h3>
              </div>
              <!-- End .progress -->
            </div>
            <!-- End .col -->


            <div class="col-md-4">
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-value">70%</div>
                <h3>Spanish</h3>
              </div>
              <!-- End .progress -->
            </div>
            <!-- End .col -->


            <div class="col-md-4">
              <div class="progress">
                <div class="progress-bar" role="progress-bar-succes" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-value">90%</div>
                <h3>English</h3>
              </div>
              <!-- End .progress -->
            </div>
            <!-- End .col -->



          </div>
          <!-- End of language-element -->

        </div>
        <!-- End .p-bar -->
      </div>
      <!-- End .col-md-6 -->



    </div>
    <!-- End .row -->
  </div>
  <!-- End .container -->
</section>
<!-- End .section -->

最佳答案

检查以下代码-

<!DOCTYPE html>
<html>
<head>
	<title>TechnoGeekZone</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style type="text/css">
	.progress{
		position: absolute;left:50.5%;top:40%;width: 2.5%;height:50%;opacity: 0.8; filter: alpha(opacity=80);
	}
	.progress-bar{
		position:absolute;top:30%; width: 100%;height: 70%;
	}
</style>
</head>
<body style="width: 100vw;height: 100vh;">
							<div class="progress" >
						    		<div class="progress-bar bg-danger" role="progressbar" style="" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">70%
						    	</div>
						 </div>

						 <div class="progress" style="left: 55%;">
						    		<div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">70%
						    	</div>
						 </div>
						 	 
						 <div class="progress" style="left: 60%;">
						    		<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">70%
						    	</div>
						 </div>
</body>
</html>

关于html - Bootstrap jquery垂直进度条设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54559661/

25

4

0

文章推荐： angular - 仅在 Angular Material 工具提示中的第一行应用样式

文章推荐： javascript - 如何在div中查找元素的值？

文章推荐： javascript - 一定时间间隔后自动更新页面

文章推荐： html - 嵌入 OpenType 字体文件

jquery - 在我的网页上显示动态数据(进度)
我正在开发一个在 gridview 中显示数据表内容的网页。而且，还有一个名为“发送到 Excel”的按钮。如果用户单击此按钮，该程序将开始生成报告(将数据表内容写入 excel 文件)。完成后，会出
javascript - promise 进度
理论:我在开始时做出了大约 100 个 promise ，然后使用 Promise.all() 解决它们。这 100 个 promise 中的每一个依次进行一些异步 REST 调用，其响应可能主要不
Python tarfile 进度
在将文件添加到 python 中的 tar 存档时，是否有任何库可以显示进度，或者可以扩展 tarfile 模块的功能来执行此操作？在理想情况下，我想展示 tar 创建的总体进度以及关于何时完成的预
xcode - 进度 View xcode的高度
有没有办法在 Xcode 中更改进度 View 栏的高度？我正在使用 Xcode 4.3 并且需要一个垂直进度条。我旋转了栏，但现在无法更改高度并且显示为一个圆圈。还有一种更有效的旋转进度条的方法
Swiftui 进度 View 隐藏
您好，我想在栏按钮项上制作未确定的进度 View 。完成后我想让它隐藏，但 hidden() 方法没有像 disabled(Bool) 这样的参数。任务完成后如何隐藏进度 View ？这就是我要的
Django - 显示 Action 进度
我有一个管理员控制的功能(导入数据库)可能需要一些时间才能完成，所以我想在这段时间内向用户显示一些反馈 - 例如进度条，或者只是一些消息。即使在长时间的 Action 中分部分发送页面也足够了。在
progress-4gl - 进度 if 语句
我是一个进步的菜鸟，实际上在基本 block 方面有问题。下面的问题是在我的 if else 语句中。它在 if, then, else then 时工作正常，但是当我想将多个语句放入 if 部分时
unix - 如何在没有回车的情况下显示日志文件的 rsync 进度？
我有一个来自 rsync 命令的日志文件，其中有进度。运行此进度时，会更新同一行上的显示信息。当我捕获此命令的输出时，我得到一个在终端上使用 cat 正常显示的文件(重播所有退格键和重新编辑)但我希望
delphi - 如何显示长时间过程的 GUI 进度？
我需要处理一些数据，每 5-10 秒显示一个进度(我以 % 显示进度，但我也更新了一些图表)。我想在没有多线程的情况下做到这一点。循环可能相当大。它可以从数百万开始，可以高达数十亿。我可以使用 G
javascript - 重新加载页面而不影响 YouTube 进度
我正在致力于使用 PHP、HTML 和 JavaScript 制作半直播互联网 channel 。您可以在此处查看演示:http://mariocreative.host/chanelko/inde
wpf 动画加载 'dot' 进度
我实际上正在使用图像为“点点点”进度设置动画。我想通过使用下面的代码来使用不透明度。动画将持续 3 秒，有没有更简单的动画方法？最佳答案这是一个快速版本，它会在控
c - 如何在C中保存do...while状态/进度？
我写了这个程序，它返回用户插入的最大整数。现在，我希望程序返回第二大整数。我创建了一个新变量(称为“状态”)，该变量应该在每次循环重复时增加 1 个单位。然后，在中断条件发生后，我将在状态变量中后退
java - 是否可以在没有外部文件的情况下保存 Java 进度？
我正在制作一个需要保存进度的java游戏。但我不想让外部文件保存进度(像《我的世界》这样的游戏有一个存储文件的“保存”目录)。所以基本上我希望它存储一些数据，当用户退出并再次返回时可以检索这些数据。比
android - 获取 RenderScript 进度
我正在使用 forEach_root 方法在 Android 上计算图像。 RenderScript RS=RenderScript.create(context); Allocation inPix
ios - 进度 View 循环
我希望这个进度 View 在完成后基本上“重置”。尝试将计数重置为 0，它确实重置了，但是对于每次重置，计时器只会变得越来越快。 .h @property (nonatomic, strong) N
java - Wicket - 进度/多个标签更新
我不确定这是否可能。当您单击“提交”按钮时，似乎有一种方法可以做到这一点。 private Button getButton(String id) { return new AjaxButto
ios - 在循环期间更新 UIProgressBar 进度
我找不到关于如何在迭代循环时更新 UIProgressbar 进度的明确答案，例如: for (int i=0;i
ios - 进度 View 翻转和缩放
我正在尝试在 Xcode 中翻转 UIProgressView 180，同时我正在尝试缩放进度 View 。在我添加翻转之前缩放效果很好，然后缩放不再起作用。有什么建议么？谢谢! [self.seco
ios - 进度 HUD 显示太晚
我目前正在通过评估 prepareForSegue 中的 segue.identifier 动态加载新 View : - (void)prepareForSegue:(UIStoryboardSegu
ios - 进度 View 无限步？
当任意进程发生时，我需要在屏幕上为用户提供状态。我无法知道需要多长时间。我怎样才能永远增加 progressView (当它接近 1 时它会减慢)。最佳答案 This如果您愿意更换进度 View ，

首页

博学

6Ren·AI

商城

html - Bootstrap jquery垂直进度条设置