반응형
progress bar
-
Progress bar 라이브러리 추천 - @frogress/lineDev/NPM 2023. 6. 6. 19:05
HTML에서 진행바(progress bar)를 만들려면 아래의 코드를 사용한다. 혹시나 커스터마이징 하는 방법이 궁금할 수 있으니 아래에 링크를 걸어두겠다. 하지만, progress tag를 사용하면 두 가지의 문제점이 있다. 첫 번째로 진행바의 백그라운드를 둥근형태로 구현했을 때, 0 ~ 1%의 진행을 나타내야 할 경우이다. 이 경우에는 progress의 진행바가 네모난 백그라운드 기준으로 퍼센트가 차기때문에 UI가 둥근 막대기를 벗어나게 된다. (따로 진행 너비를 스타일링해주어야 한다.) 두 번째로 진행 정도에 그라디언트를 넣는 경우이다. 진행 너비에 따른 그라디언트가 들어가기 때문에 너비가 작은 경우 그라디언트가 자연스럽지 않고, 찌그러져 보인다. 특히, 둥근 형태의 진행바를 구현할 때에는 더욱 심..