html progress bar 커스텀

MIE·2022년 11월 30일
0

왜안돼

목록 보기
1/1

안녕하세요...
오늘은 html의 progress 태그를 이용해서
움직이는 바를 만들어보겠습니다
css로 커스텀하는 법과
버튼 클릭했을 때 progress 바의 value++를
해주는 이벤트도 만들어 보았습니다~

오늘 회사에서 div태그 두개로 progress 바를 만들다가
자바스크립트로 퍼센트 계산하면서 progress value에 따른
width 값을 주기가 너무 힘이 들어 구글링을 시도했습니다

그러다가 찾은 것이 progress라는 태그였는데요?!

구글링을 안했으면 직접 만들뻔했네요..
구글링을 생활화합시다

최종 완성본 깃허브인데
https://github.com/simayeon/progressBar

이것만 보면 좀 어려울 수 있으니
하나씩 설명해보려 합니다..
설명이 이상한 부분은 댓글주세요~


프로그레스 태그는 처음에 못생겼기 때문에
progress{
appearance: none;
}
이렇게 해두는 것을 추천드립니다..

progress::-webkit-progress-bar
이것은 프로그레스 바의 배경부분입니다

progress::-webkit-progress-value
이것은 프로그레스 바의 value++되면 올라오는
색이 있는 부분입니다
기본설정은 아마 파란색일텐데요
백그라운드 색을 바꿔줄 수 있습니다
프로그레스 바의 value가 더해질때 움직임이
뻣뻣하므로 이 태그 안에
transition: all 0.3s; 를 적어주면 쉽게 부드러운
움직임을 구현할 수 있습니다~

스크립트의 경우
cnt == prg.max+2
왜 prg.max에 2를 더했는지 궁금하실텐데요,
prg.value == prg.max
이렇게 설정을 해두면 100% 차는 모습을 보지 못하고
바로 value가 0이 되어버려서 값을 약간 다르게
지정해서 progress 바가 가득 찬 모습을
보여줄 수 있게 만들었습니다..

코드의 일부분에만 설명을 적으니 이상한데요
자세한 건 깃허브를 봐주시길 바랍니다..
여기다 코드를 다 올리려고 하니까 좀 기네요 ㅠㅠ

안궁금하시겠지만 그래도 제가 만든 프로그레스 바에 대한
설명을 드리자면 슈가슈가룬에 나오는
하트 등급표를 보고 만든 프로그레스 바입니다
hi수치를 채우면 하트등급이 점점 높아집니다~

일할때는 유치한 것을 못만들기 때문에
집오면 만들곤 합니다..
오늘은 늦어서 못하고 내일은 progress 바를 다르게
이용하는 경우도 가지고 와볼게요
감사합니다~

profile
안녕하세요

0개의 댓글