아래 이미지와 같이 진행률 표시 줄을 만들고 싶습니다.
나는 이것을 만드는 것에 대해 전혀 모른다. HTML5 기술을 사용해야합니까?
이 진행률 표시 줄을 만드는 데 도움을 주시겠습니까?
답변
#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>(편집 : 변경된 구문 강조; 하위 항목을 하위 선택기로 변경)
답변
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>답변
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>답변
난이게 좋아:
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>답변
@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>