tauri 개발 따라해보기 10

STEP16

이번에는 살짝 가벼운 주제로 넘어가보자.

이번글에는 RUST code는 등장하지 않으니 넘어가도 상관없다.

 

searching을 하게되면 어느정도의 응답 시간이 필요하다. UI를 지루하지 않도록

progress bar를 넣어보자.

 

index.html에 아래처럼 추가 작업한다.

<label for="name-check-strict">strict</label> &nbsp;&nbsp;

          <div id="id-drawcircle" class="progress-bar">

            <div class="circle border"></div>

          </div>

 

styles.css에는 progress-bar class와 animation keyframe을 정의하는 코드를 추가한다.

.progress-bar {

  position: relative;

  width: 20px;

  height: 20px;

}

 

@-webkit-keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

 

 

다음은 main.js

 let drawCircle = document.querySelector("#id-drawcircle");

 

init() 에 초기값 추가

 drawCircle.style.display = "none";

 

run() 에 아래처럼 속성 변경 추가

 drawCircle.style.display = "block";

 timerId_check = setInterval(() => checkDone(), 1000);

 

displayList()에 다름 속성 값 추가

drawCircle.style.display = "none";

 

 

strict checkbox 우측에 동그라민 progress circle이 돌아간다... 끝