1 개요[ | ]
- CSS 프로그레스 바
2 예시 1[ | ]
html
Copy
<style>
.progress1 {
border: 1px solid gray;
height: 7px;
width: 40px;
}
.progress1>* {
background: silver;
height: 100%;
}
</style>
<div class="progress1">
<div style="width:36%;"></div>
</div>
<br>
<div class="progress1">
<div style="width:90%;"></div>
</div>
3 예시 2[ | ]
html
Copy
<style>
.resource {
display: flex;
justify-content: flex-end;
margin-bottom: -1px;
}
.label {
font-size: 7px;
}
.total {
border: 1px solid gray;
height: 7px;
width: 40px;
margin: 3px 0 0 2px;
}
.total>.bar {
background: silver;
height: 100%;
}
</style>
<div class="resource">
<div class="label">CPU</div>
<div class="total"><div class="bar" style="width:36%;"></div></div>
</div>
<div class="resource">
<div class="label">MEM</div>
<div class="total"><div class="bar" style="width:90%;"></div></div>
</div>
4 예시 3[ | ]
html
Copy
<style>
.usages {
display: flex;
}
.usage {
width: 28px;
display: flex;
align-items: center;
}
.text {
font-size: 7px;
writing-mode: vertical-rl;
text-orientation: upright;
padding-top: 1px;
}
.total {
height: 26px;
width: 4px;
border-radius: 8px;
background: #dddb;
overflow: hidden;
position: relative;
}
.bar {
position: absolute;
bottom: 0;
width: 100%;
border-radius: 0px 0px 8px 8px;
background: #4db;
}
</style>
<div class="usages">
<div class="usage">
<div class="text">HDD</div>
<div class="total"><div class="bar" style="height:40%"></div></div>
</div>
<div class="usage">
<div class="text">CPU</div>
<div class="total"><div class="bar" style="height:0%"></div></div>
</div>
<div class="usage">
<div class="text">RAM</div>
<div class="total"><div class="bar" style="height:120%"></div></div>
</div>
</div>