Question

我正在尝试在引导程序中设置进度条。我一直在研究代码，只是在寻找第二种意见，如果我以正确的方式做到这一点。还是有更好的方法呢？

这是我的代码：

$(".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 -->

Answer 1

签出以下代码-

<!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>

Bootstrap jQuery垂直进度栏设置

1 个答案: