CSS 프로그레스 바

1 개요

CSS 프로그레스 바

2 예시 1

<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

<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

<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>

5 같이 보기

• HTML progress 태그