-
Progress bar 라이브러리 추천 - @frogress/lineDev/NPM 2023. 6. 6. 19:05반응형
HTML에서 진행바(progress bar)를 만들려면 아래의 코드를 사용한다. 혹시나 커스터마이징 하는 방법이 궁금할 수 있으니 아래에 링크를 걸어두겠다.<progress id="progress" value="50" min="0" max="100"></progress>
하지만, progress tag를 사용하면 두 가지의 문제점이 있다.
첫 번째로 진행바의 백그라운드를 둥근형태로 구현했을 때, 0 ~ 1%의 진행을 나타내야 할 경우이다.이 경우에는 progress의 진행바가 네모난 백그라운드 기준으로 퍼센트가 차기때문에 UI가 둥근 막대기를 벗어나게 된다. (따로 진행 너비를 스타일링해주어야 한다.)
두 번째로 진행 정도에 그라디언트를 넣는 경우이다.
진행 너비에 따른 그라디언트가 들어가기 때문에 너비가 작은 경우 그라디언트가 자연스럽지 않고, 찌그러져 보인다.
특히, 둥근 형태의 진행바를 구현할 때에는 더욱 심하게 보인다.
이를 해결하기 위한 라이브러리가 바로 @frogress/line이다.
자주 사용할 것 같은 기능만 소개하겠다. 아래에 공식문서를 링크 걸 테니 꼭 살펴보자.
Basic Usage$ npm i @frogress/line import { LineProgressBar } from '@frogress/line' // 기본 사용법 <LineProgressBar percent={65} />
Styling
// color <LineProgressBar percent={65} progressColor="linear-gradient(to right, #ff655b 60%, #fd297b)" containerColor="#f0d4da" /> // rounding <LineProgressBar percent={value} rounded={36} height={36} /> // sizing <LineProgressBar percent={25} width={400} height={24} /> // label <LineProgressBar label={(value: number) => <CustomLabelComponent percent={value} />} percent={45} rounded={36} height={36} />
반응형'Dev > NPM' 카테고리의 다른 글
Alert창 이쁜 라이브러리 추천 - SweetAlert2 (0) 2023.05.20