반응형
퍼센트 게이지에 따라 상기와 같은 모양의 유동적인 바를 구현하는 방법이다.
HTML
<body>
<div class="bar-container">
<div id="Content_bar" class="bar" style="width:55%">bar</div>
</div>
</body>
CSS : base에 해당하는 bar와 유동적으로 변하는 퍼센트 바의 기본 스타일 지정
<style>
.bar-container {//회색바
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 5px;
}
.bar {//색깔 바
height: 20px;
background-color: #2196F3;
border-radius: 5px;
}
</style>
SCRIPT : 퍼센트바의 Width를 설정해 퍼센트 바의 채워지는 정도 설정(다음 코드는 임의적으로 Width를 설정한 것이지만 계산에 따라 퍼센트바를 유동적으로 변하게 할수 있다.)
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("Content_bar").style.width = '20%';
});
</script>
반응형
'IT > javascript JQUERY' 카테고리의 다른 글
| javascript 인쇄전 특정 화면 숨김,보이기 (0) | 2020.09.10 |
|---|---|
| Chart.js 활용하기(다중 그래프,단일 그래프) (0) | 2020.09.10 |
| 테이블 타이틀행 고정(tableHeadFixer) (0) | 2020.07.22 |
| javascript/JQUERY 요소의 display설정 (0) | 2020.03.29 |
| javasctipt/JQUERY 줌설정 (0) | 2020.03.29 |