<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #7 - Custom Animated Progress Bar</title>
  </head>
  <body>
    <div class="progress">
      <div class="progress-done" data-done="80">
        80%
      </div>
    </div>
    <!-- --------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
}

.progress {
  background-color: #d8d8d8;
  border-radius: 20px;
  height: 30px;
  width: 300px;
}

.progress-done {
  background-image: linear-gradient(135deg, #fff720 10%, #3cd500 100%);
  border-radius: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}

const progress = document.querySelector(".progress-done");

setTimeout(function () {
  progress.style.width = progress.getAttribute("data-done") + "%";
  progress.style.opacity = 1;
}, 500);
//500ms초 동안 투명도 1인 진행도가 html의 data-done에 적힌 수의 %만큼의 넓이를 가지고 채워진다.
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.