로딩바 구현

로딩바를 지금까지는 absolute 방식을 써서 만들었는데,

찾아보니 fix 방식을 쓰는것이 훨씬 깔끔하고 쉬웠다.

아래의 링크는 내가 깔끔한 로딩바를 구현하기 위해 참조한 링크이다.

https://codepen.io/MattIn4D/pen/LiKFC

결론적으로 내 코드는 아래와 같다.

* html 부분

<div id="loading">

  <img id="loading-img" src="./images/loading.gif" alt="">

</div>

* css 부분

#loading {

  position: fixed;

  margin: auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  z-index: 7000;

}

#loading:before {

  content: '';

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255);

}

#loading img {

  position: absolute;

  top: 0px;

  bottom: 0px;

  left: 0px;

  right: 0px;

  margin: auto;

  width: 120px;

  height: 120px;

  z-index: 7001;

}