vue progress bar 만들기

안녕하세요. 오늘은 start 버튼을 누르면

progress bar가 차오르는 것을 만들어 보려 합니다. (아래 그림 참조)

게임을 만들거나 로딩 시간등에 사용하면 좋을것 같습니다.

 

 

코드만 있으면 되는 분들은 아래 codepen 사이트에서 소스만 긁어 가시면 됩니다

https://codepen.io/makegametogether/pen/oNENoQy

Vue Simple progress bar

 

 

Progressbar 주요 코드 설명

---

<template>
  <div id="app">
    
    <button v-on:click="start">start</button>
    <button v-on:click="stop">stop</button>
    <div class="progressBar">
       <div id="bar" class="innerbar"></div>
    </div>
  </div>
</template>

 

전체 적인 vue 구성입니다. 두 개의 버튼과 progress bar로 이루어져 있습니다.

이때 각 버튼은 progress bar를 시작 및 멈추는 역할을 하고 있습니다.

 

<style>

.progressBar {
  max-width: 330px;
  width: 90%;
  margin: 10px auto;
  margin-top: 100px;
  height: 8px;

  border-radius: 3px;
  background: linear-gradient(#6fa6d66c, #7db1df54);
}

.innerbar {
  max-width: 330px;
  height: 100%;
  text-align: right;
  height: 8px; /* same as #progressBar height if we want text middle aligned */
  width: 30%;
  border-radius: 3px;
  background: linear-gradient(#5be6ba, #5ed1ad);
}
</style>

progress bar에 대한 css 입니다.

progressbar는 아래쪽 bar 이고

innerbar는 색이 차오르는 bar를 위한 class 입니다.

 

methods: {
    start() {
      this.timeBegan = new Date();
      let el = document.getElementById("bar");
      el.style.width = "0%";

      if (this.progressbarHandler == null) {
        this.progressbarHandler = setInterval(this.updateProgressbar, 30);
      }
    },
    stop() {
      if (this.progressbarHandler != null) {
        clearInterval(this.progressbarHandler);
        this.progressbarHandler = null;
      }
    },
    updateProgressbar() {
      var currentTime = new Date(),
        timeElapsed = new Date(
          this.countDownTime - (currentTime - this.timeBegan)
        );
      let time = currentTime - this.timeBegan;
      let el = document.getElementById("bar");
      let width = (time / this.MAX_TIME) * 100 + "%";
      width = parseFloat(width).toFixed(2);
      if (width > 100) width = 100;

      //console.log("width" + width);
      let widthStr = width + "%";
      el.style.width = widthStr;
    },
  }

 

버튼을 눌렀을 때 bar의 동작을 컨트롤 하는 부분입니다.

start 버튼을 누르면 start() 함수가 실행되고 그 함수 안에서는

handler를 사용해 0.03초 마다 updateProgressbar() 함수를 부르도록 했습니다.

 

updateProgressbar() 함수의 경우

MAX_TIME (현재는 4초) 의 시간동안 0에서 100까지 innerbar가 차오르도록 구현했습니다.

 

도움이되었으면 좋겠네요

 

감사합니다.

 

다른 Post 보기