HTML 및 CSS가있는 진행률 표시 줄


81

아래 이미지와 같이 진행률 표시 줄을 만들고 싶습니다.

진행률 표시 줄 예

나는 이것을 만드는 것에 대해 전혀 모른다. HTML5 기술을 사용해야합니까?

이 진행률 표시 줄을 만드는 데 도움을 주시겠습니까?

답변:


210

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>

깡깡이

(편집 : 변경된 구문 강조; 하위 항목을 하위 선택기로 변경)


3
일부는 중앙에 백분율 표시기가 있는 진행률 표시 줄이 더 유용 하다는 것을 알 수 있습니다 .
Tomáš Zato-Monica 복원

20

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>


3
사용하는 브라우저에 따라 border-radius, -webkit-border-radius또는-moz-border-radius
Veger

단 3 분만에 작업을 수행 한 것에 대한 찬사, 당신은 매우 재능있는 진행률 표시 줄 사람이어야합니다! 와!
Daniël Tulp 2015

@ 다니엘 감사합니다! 사람들이 알아 차릴 때 멋지다!
MADARA의 유령

6
이 솔루션의 유일한 문제는 JavaScript 코드가 DOM의 일부가 아니기 때문에 : after 의사 요소의 길이를 수정하기가 정말 어렵다는 것입니다. 내가 뭔가를 놓치고 있지 않는 한.
FrontierPsycho

16

2014 답변 : 2014 년부터 HTML 5에는<progress> element JavaScript가 필요없는이 포함되어 있습니다. 백분율 값은 인라인 콘텐츠를 사용하여 진행률과 함께 이동합니다. 웹킷에서만 테스트되었습니다. 도움이되기를 바랍니다.

jsFiddle

CSS :

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<progress id="progressBar" max="100" value="77"></progress>


2020으로, 모든 브라우저에서 꽤 잘 지원 : caniuse.com/#feat=progress
frackham

"자바 스크립트가 필요하지 않다"고 말하는 것이 다소 비현실적이지 않습니까? 즉, 요소 ​​자체는 매우 단순한 시각적 구성 요소이지만 값을 얻으려면 어떻게 든 동적으로 "value"속성을 설정해야합니다. 어떻게 될까요? Javascript를 추측하기 위해 내기를 걸었습니다. 그래서 질문은이 요소가 실제로 많은 일을하지 않고 매우 통제 된 방식으로 무언가를 제시 할 때 그 정도의 편리함이나 이점을 제공하는지 여부가됩니다.
Lev

4

난이게 좋아:

HTML로만 이것과 하위 호환되는 나머지 CSS3로 매우 매끄 럽습니다 (눈에 띄지 않을 것입니다)

편집 아래에 코드가 추가되었지만 위의 페이지에서 직접 가져 왔으며 모든 크레딧은 해당 작성자에게 있습니다.

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-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;
}
<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>


2
참고 것을 링크 전용 답변 낙심, SO 응답 솔루션 (대 아직 시간이 지남에 따라 부패하는 경향 참조의 다른 경유지)에 대한 검색의 엔드 포인트이어야한다. 링크를 참조로 유지하면서 여기에 독립형 시놉시스를 추가하는 것을 고려하십시오.
kleopatra 2013 년

@kleopatra, 웹 사이트를 계속 사용할 수있게 해주셔서 감사합니다. 나는 링크 만 (확실히 jsfiddle과 같은 사이트)은 권장하지 않는다는 것을 알고 있습니다. 제가 사용한 코드를 추가하겠습니다.
Daniël Tulp 2013 년

4

@RoToRa의 답변과 동일하며 약간의 조정 (올바른 색상 및 치수)이 있습니다.

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>

다음은 바이올린입니다. jsFiddle

그리고 다음과 같은 모습입니다. jsFiddle 스크린 샷


4

최신 브라우저에서는 CSS3 및 HTML5 진행 요소를 사용할 수 있습니다!

progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 
<progress max="100" value="40"></progress>


3

css 선형 그라데이션이 작동하는 모든 요소에 대해 중첩 된 div가없는 진행률 표시 줄.

여기 JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();
#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}
<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>


2

막대의 왼쪽 부분 (둥근 부분)을 표시하는 요소를 만들고 오른쪽 부분에 대한 요소도 만듭니다. 실제 진행률 표시 줄의 경우 반복되는 배경과 실제 진행 상황에 따라 달라지는 너비가있는 세 번째 요소를 만듭니다. 모든 것을 배경 이미지 위에 놓습니다 (빈 진행률 표시 줄 포함).

하지만 당신이 이미 알고 있다고 생각합니다 ...

편집 : 텍스트 배경을 사용하지 않는 진행률 표시 줄을 만들 때. Rikudo SenninRoToRa같이을 사용하여 border-radius둥근 효과를 얻을 수 있습니다 !


1

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}
<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>


1
    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>

0

코드를 추가하지 않고 진행률 표시 줄을 갖고 싶다면 PACE 가 멋진 도구가 될 수 있습니다.

pace.js와 원하는 CSS 테마 만 포함하면 페이지로드 및 AJAX 탐색을위한 멋진 진행률 표시기가 나타납니다. PACE의 가장 좋은 점은 진행 상황을 자동으로 감지하는 것입니다.

다양한 테마와 색 구성표도 포함되어 있습니다.

시도할만한 가치가 있습니다.


0
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}

이것이 내가 중학교 코딩 프로젝트에 대한 ... 무엇을 사용, 그것은, 예쁜 아니다 그러나 그것은 작동
타일러 Donath

1
가장 예쁘지 않을뿐만 아니라 유효하지 않으며 작동하지 않습니다. CSS 속성에는 공백이 없습니다. 예를 들어 background - color: blue;필요합니다background-color: blue;
Matijs

0

사용 setInterval.

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>

사용 CSS Transtitions.

function loading()
{
    document.getElementById("progress").style.width="200px";
}
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>


0

여기에 HTML5 진행률 표시 줄을 만들기위한 자습서가 있습니다 . HTML5 방법을 사용하지 않거나 모든 브라우저 솔루션을 찾고 있다면 다음 코드를 시도해보십시오.

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>

GOLD 색상을 진행률 표시 줄 색상으로 변경하고 #dbdbdb를 진행률 표시 줄의 배경색으로 변경할 수 있습니다.


-3

상태 표시 줄의 각 부분에 대해 여러 사진을 만들 수없는 이유는 무엇입니까? 3 분의 1 인 경우 상태 표시 줄의 3 분의 1 만 표시합니다. 매우 간단합니다. 양식 태그를 사용한 입력을 기반으로 다음 그림으로 변경하는 방법을 알아낼 수있을 것입니다. 여기에 코드의 일부가 있습니다. 나중에 양식 내용을 파악해야합니다.

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

이제 간단 해 보이지 않습니까?

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.