페이지 로딩 구현

js

1. $(document).ready(function(){
2.     $('body').prepend('<div class="loader"></div>');
3.     $('body').append('<div class="overlay"></div>');
5.     $("div.loader").fadeOut(300);
6.     $("div.overlay").fadeOut(300);
7.     $("div.container").show();
8. });

css

1. .loader{
2.     position:fixed;
3.     left:50%;
4.     top:50%;
5.     z-index:1;
6.     width:150px;
7.     height:150px;
8.     margin:-75px 0 0 -75px;
9.     border:16px solid #fff;
10.     border-radius:50%;
11.     border-top:16px solid #3498db;
12.     width:120px;
13.     height:120px;
14.     -webkit-animation:spin 2s linear infinite;
15.     animation:spin 2s linear infinite;
16.     z-index:105
17. }
20. @-webkit-keyframes spin{
21.     0%{-webkit-transform:rotate(0deg)}
22.     100%{-webkit-transform:rotate(360deg)}
23. }
25. @keyframes spin{
26.     0%{transform:rotate(0deg)}
27.     100%{transform:rotate(360deg)}
28. }
30. .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.35);z-index:100}

html

1. <div class="container" style="display:none">
2. 본문
3. </div>