[HTML] Progress bar

프로그래스 바 구현 방법

1. html css 태그 이용

html 파일

  <div class="bar-container">
    <h2>HTML</h2>
    <ul>
      <li>
       <span class="css-progressbar bar"/>
      </li>
    </ul>
  </div>

css 파일

.css-progressbar {
    width: 80%;
    animation: progressbar 2s ease-out;
}
// animation
@keyframes progressbar { 
  0%  { 
    width: 0%;
  } 
  100% { 
    width: 80%;
  }  
}

 

-----

다양한 프로그래스 바

참고 https://alvarotrigo.com/blog/progress-bar-css/

 

2. html5 태그 이용

<progress id="progress" value="50" min="0" max="100"></progress>

progress {
    -webkit-appearance: none;
    border: 0;
    border-radius: 9px;
}

::-webkit-progress-bar {
    background-color: white;
    border-radius:10px;
}

::-webkit-progress-value {
    background-color: orange;
    border-radius:10px;
}

3. svg 이용

<svg height="150" width="150">
     .........
</svg>

 

 

참고 https://mygumi.tistory.com/293