아래 이미지와 같이 진행률 표시 줄을 만들고 싶습니다.
나는 이것을 만드는 것에 대해 전혀 모른다. HTML5 기술을 사용해야합니까?
이 진행률 표시 줄을 만드는 데 도움을 주시겠습니까?
HTML 및 CSS가있는 진행률 표시 줄
답변:
#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 복원
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>
사용하는 브라우저에 따라
—
Veger
border-radius, -webkit-border-radius또는-moz-border-radius
단 3 분만에 작업을 수행 한 것에 대한 찬사, 당신은 매우 재능있는 진행률 표시 줄 사람이어야합니다! 와!
—
Daniël Tulp 2015
@ 다니엘 감사합니다! 사람들이 알아 차릴 때 멋지다!
—
MADARA의 유령
이 솔루션의 유일한 문제는 JavaScript 코드가 DOM의 일부가 아니기 때문에 : after 의사 요소의 길이를 수정하기가 정말 어렵다는 것입니다. 내가 뭔가를 놓치고 있지 않는 한.
—
FrontierPsycho
2014 답변 : 2014 년부터 HTML 5에는<progress> element JavaScript가 필요없는이 포함되어 있습니다. 백분율 값은 인라인 콘텐츠를 사용하여 진행률과 함께 이동합니다. 웹킷에서만 테스트되었습니다. 도움이되기를 바랍니다.
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
난이게 좋아:
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>
참고 것을 링크 전용 답변 낙심, SO 응답 솔루션 (대 아직 시간이 지남에 따라 부패하는 경향 참조의 다른 경유지)에 대한 검색의 엔드 포인트이어야한다. 링크를 참조로 유지하면서 여기에 독립형 시놉시스를 추가하는 것을 고려하십시오.
—
kleopatra 2013 년
@kleopatra, 웹 사이트를 계속 사용할 수있게 해주셔서 감사합니다. 나는 링크 만 (확실히 jsfiddle과 같은 사이트)은 권장하지 않는다는 것을 알고 있습니다. 제가 사용한 코드를 추가하겠습니다.
—
Daniël Tulp 2013 년
@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
그리고 다음과 같은 모습입니다.
최신 브라우저에서는 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>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>막대의 왼쪽 부분 (둥근 부분)을 표시하는 요소를 만들고 오른쪽 부분에 대한 요소도 만듭니다. 실제 진행률 표시 줄의 경우 반복되는 배경과 실제 진행 상황에 따라 달라지는 너비가있는 세 번째 요소를 만듭니다. 모든 것을 배경 이미지 위에 놓습니다 (빈 진행률 표시 줄 포함).
하지만 당신이 이미 알고 있다고 생각합니다 ...
편집 : 텍스트 배경을 사용하지 않는 진행률 표시 줄을 만들 때. Rikudo Sennin 및 RoToRa 와 같이을 사용하여 border-radius둥근 효과를 얻을 수 있습니다 !
.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> .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>
코드를 추가하지 않고 진행률 표시 줄을 갖고 싶다면 PACE 가 멋진 도구가 될 수 있습니다.
pace.js와 원하는 CSS 테마 만 포함하면 페이지로드 및 AJAX 탐색을위한 멋진 진행률 표시기가 나타납니다. PACE의 가장 좋은 점은 진행 상황을 자동으로 감지하는 것입니다.
다양한 테마와 색 구성표도 포함되어 있습니다.
시도할만한 가치가 있습니다.
.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
가장 예쁘지 않을뿐만 아니라 유효하지 않으며 작동하지 않습니다. CSS 속성에는 공백이 없습니다. 예를 들어
—
Matijs
background - color: blue;필요합니다background-color: blue;
사용 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>여기에 HTML5 진행률 표시 줄을 만들기위한 자습서가 있습니다 . HTML5 방법을 사용하지 않거나 모든 브라우저 솔루션을 찾고 있다면 다음 코드를 시도해보십시오.
<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
<div style="height: 25px; width:87%; background-color: gold"> </div>
</div>GOLD 색상을 진행률 표시 줄 색상으로 변경하고 #dbdbdb를 진행률 표시 줄의 배경색으로 변경할 수 있습니다.
상태 표시 줄의 각 부분에 대해 여러 사진을 만들 수없는 이유는 무엇입니까? 3 분의 1 인 경우 상태 표시 줄의 3 분의 1 만 표시합니다. 매우 간단합니다. 양식 태그를 사용한 입력을 기반으로 다음 그림으로 변경하는 방법을 알아낼 수있을 것입니다. 여기에 코드의 일부가 있습니다. 나중에 양식 내용을 파악해야합니다.
<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>
이제 간단 해 보이지 않습니까?