티스토리 뷰

개발

[CSS][JS] 간단한 Progress Bar 만들기

woody._.k 2021. 10. 24. 16:46

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="progress-bar.css">
    <title>Progress Bar</title>
</head>
<body>
    <button class="btn-progress" type="button">progress</button>
    <button class="btn-initiate" type="button">initiate</button>
    <div class="progress-bar">
        <div class="progress-bar__bar"></div>
    </div>
    <script>
        const btnProgressElem = document.querySelector('.btn-progress');
        const btnInitiateElem = document.querySelector('.btn-initiate');
        const progressBarElem = document.querySelector('.progress-bar__bar');
        btnProgressElem.addEventListener('click', () => {
            progressBarElem.classList.add('active');
        })
        btnInitiateElem.addEventListener('click', () => {
            progressBarElem.classList.remove('active');
        })
    </script>
</body>
</html>

 

progress-bar.css

.progress-bar {
    background-color: #09B864;
    border-radius: 4px;
    box-shadow: inset 0 0.5em 0.5em rgba(0,0,0,0.05);
    height: 5px;
    margin: 2rem 0 2rem 0;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    width: 100%;
  }

  .progress-bar__bar {
    background-color: #ececec;
    box-shadow: inset 0 0.5em 0.5em rgba(94, 49, 49, 0.05);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .progress-bar__bar.active {
    transition: all 5000ms ease-out;
    transform: translateX(100%);
    -webkit-transform: translateX(100%)
  }

 

참고

https://codepen.io/mcraiganthony/pen/waaeWO

 

Progress Bars - CSS Transition

Simple, horizontal progress bars with CSS transitions....

codepen.io

 

 

저작자표시 비영리

'개발' 카테고리의 다른 글

[JS] 비밀번호 유효성 검사  (0) 2021.10.29
[JS] Event.stopPropagation()를 활용한 모달 만들기  (0) 2021.10.28
[JAVA] JSP 기본문법 - 주석/선언/표현식/스크립트릿  (0) 2019.05.22
[JAVA] JSP 내장객체 - out  (0) 2019.05.22
[JAVA] JSP 내장객체 - request/response  (0) 2019.05.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함