자바스크립트 로딩 이미지 화면

gif로 제작된 로딩 이미지를 화면에 보여주는 일은 엄청나게 빈번히 발생합니다. gif로딩 이미지도 구글에서 검색하면 엄청나게 많구요...ㅎ

오늘은 로딩 이미지를 화면에 보여주기 위한 두가지 방법을 알아보겠습니다.
첫번째는 gif로딩 이미지가 있는 경우 자바스크립트 제어를 통해 로딩 화면을 구현하는 방법이고 두번째 방법은 이미지 없이 CSS만으로 구현하는 방법 입니다.


▶ 이미지가 있는 경우

---

첫번째로 이미지가 있다면 밑에 자바스크립트 함수를 소스에 추가 합니다.
//-----------------------------------------------------
// 로딩 이미지 화면 출력
//-----------------------------------------------------
showLoading : function()
{
        var appendHtml = "";


        appendHtml += "<div id='upLoading' style='display:none; border:0; z-index:100; text-align:center; background:#FFFFF0; filter:alpha(opacity=60); opacity:0.6;'>";
        appendHtml += "<span style='display:table-cell;  text-align:center; background:white; vertical-align:middle;'>";
        appendHtml += "<img src='로딩(Loading) 이미지 경로'/>";
        appendHtml += "</span>";
        appendHtml += "</div>";


        $("body").append(appendHtml);


        $("#upLoading").css("position", "absolute");
        $("#upLoading").css("left", 0);
        $("#upLoading").css("top", 0);
        $("#upLoading").css("width",   "100%");
        $("#upLoading").css("height",  "100%");
        $("#upLoading").css("display", "table");
    }
* img에 Loading 이미지 경로를 설정하시고 위치된 곳에 아래와 같은 이미지가 있다면 오오~~~ 보입니다...ㅎ

로딩 이미지를 제거하고 싶다면 밑에 스크립트를 실행하시면 됩니다.
//-----------------------------------------------------
// 로딩 화면 제거
//-----------------------------------------------------
hideLoading : function()
{
        $("#upLoading").css("display", "none");
}


▶ CSS 구현

---

이미지가 없다고요? 너무 걱정마세요. CSS 만으로 충분히 구현이 가능 합니다.
소스상에 밑의 스타일 영역을 추가 합니다.
<style type="text/css">
 #link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
 #link:hover {color: #CCCCCC}
 #link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}
 /** BEGIN CSS **/
 body {background: #333333;}
 @keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-moz-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-webkit-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-o-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-moz-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-webkit-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @-o-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
 }
 @keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
 }
 @-moz-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
 }
 @-webkit-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
 }
 @-o-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
 }
 .loading-container,
 .loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
 }

 .loading-container { margin: 40px auto }
 .loading {
  border: 2px solid transparent;
  border-color: transparent #fff transparent #FFF;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
 }
 .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
 }
 .loading-container:hover .loading,
 .loading-container .loading {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }
 #loading-text {
  -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
  -o-animation: loading-text-opacity 2s linear 0s infinite normal;
  -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, "Helvetica", ""arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100px;
 }
</style>
그리고 body 태크 안에 밑에 div 컨트롤을 추가해 줍니다.
<div class="loading-container">
    <div class="loading"></div>
    <div id="loading-text">loading</div>
</div>

그러면 밑에 이미지처럼 CSS만으로 구현된 Loading 화면이 보입니다.와우~ㅎㅎㅎ

이상으로 자바스크립트, CSS 로딩 이미지 화면에 대한 포스팅을 마칠까 합니다.^^