Question

它不是简单的进度条。我已经得到了简单的进度条，但它不起作用。我需要一个表格填充进度滚动条，可以向上或向下滚动..

Answer 1

您的应用程序对于您要使用所述进度条的操作非常模糊，但这是一个使用JavaScript的简单动画进度条：

＆＃13;

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

＆＃13;

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

.meter { 
	height: 20px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

＆＃13;

<h4>Simple animated progress bar</h4>
<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 


<h4>A static bar using CSS</h4>
<p>Just change the style statically or animate with Jquery/JS</p>
<div class="meter">
   <span style="width: 50%"></span>
</div>

＆＃13;

jQuery Progressbar Widget

可以帮助你，祝你好运。

Answer 2

您可以在每个输入填充上使用下面提到的代码和更新值。

progress{
    -webkit-transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
    -moz-transform-origin: 0 100%;
    -moz-transform: rotate(90deg);
    -ms-transform-origin: 0 100%;
    -ms-transform: rotate(90deg);
    transform-origin: 0 100%;
    transform: rotate(90deg);    
}

<progress id="progressbar" value="60" max="100"></progress>

如何使用jquery制作表单填充进度垂直滚动条

2 个答案: