라이브러리 없이 만드는 간단한 로딩바(loadingbar)

로딩바

 

흰색 부분이 회전하는 간단한 로딩바를 html, css, js만 가지고 라이브러리 없이 만들어 보자.

 

 

html

<div id="loading"></div>

 

body 태그 안에 원하는 곳에 넣어 준다.

 

 

css

  #loading {

    position: fixed;

    top: 50%;

    left: 50%;

    display: none;

    width: 50px;

    height: 50px;

    border: 3px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    border-top-color: #fff;

    animation: spin 1s ease-in-out infinite;

    -webkit-animation: spin 1s ease-in-out infinite;

    z-index: 9999;

  }

 

원하는 크기 및 속도, 색상 등 수정

 

 

js

  // 로딩 바를 보여주는 함수

  function showLoadingBar() {

    let loadingBar = document.getElementById("loading");

    loadingBar.style.display = "inline-block";

  }

  // 로딩 바를 감추는 함수

  function hideLoadingBar() {

    let loadingBar = document.getElementById("loading");

    loadingBar.style.display = "none";

  }

 

일반적으로 api 호출 및 오래걸리는 작업 전에 showLoadingBar를 호출하고 작업 후 hideLoadingBar를 써서 감춰주면 된다.

 

  // 로딩 바를 보여주는 함수

  function showLoadingBar() {

    let loadingBar = document.getElementById("loading");

    loadingBar.style.display = "inline-block";

    setTimeout(function () {

      loadingBar.style.display = "none";

    }, 500);

  }

 

단순히 로딩바를 보여줬다가 사라지게 만들고 싶은 경우에는 setTiemout 시간 값을 변화시키면서 showLoadingBar를 호출해 주면 된다.