[컴][웹] loading 화면을 위한 div element 만들기

loading div / overlapped div

loading 화면을 위한 div element 만들기

전체화면에 loading 을 넣을때

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

부분적인 loading

<div>
  <button type="button">Register Now</button> 
  <div class="loading">
    <img id="loading-image" src="/static/images/loading.gif" alt="loading...">
  </div>
</div>

.loading {
   opacity: 0.5;
   position: relative;
   display: block;
   background-color: #fff; /* background 색은 image 의 background 색과 맞춘다. */
   z-index: 99;
   height: 50px;  /* button 의 높이가 50px 일 때 */
   margin-top: -50px;  /* button 의 높이가 50px 일 때 */
}

.loading > img {
  position: absolute;
  z-index: 100;
  margin: auto;
  left: 0;
  right: 0;
}

이것은 javascript 로 <div class="loading"> 의 height 와 margin-top 을 넣어주면, 좀 더 dynamic 하게 사용될 수 있을 듯 하다.

Reference

1. javascript - How to show Page Loading div until the page has finished loading - Stack Overflow
2. margin-left: auto; margin-right: auto; left: 0; right: 0;