Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

loader.html 본문

TIS_2016/주말반_4기

loader.html

moozi 2016. 9. 10. 18:29

loader.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css - loader</title>
    <style>
        #loader {
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 120px;
          height: 120px;
          animation: spin 2s linear infinite;

        }
       
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }


</style>
</head>
<body  onload="myFunction()" >
    <div id="loader">
       
    </div>
    <div style="display:none;" id="myDiv" class="animate-bottom">
      <h2>CSS3</h2>
      <p>CSS3는 ........</p>
    </div>
   
    <script>
    var myVar;

    function myFunction() {
        myVar = setTimeout(showPage, 3000);
    }

    function showPage() {
      document.getElementById("loader").style.display = "none";
      document.getElementById("myDiv").style.display = "block";
    }
    </script>

 

</body>
</html>

'TIS_2016 > 주말반_4기' 카테고리의 다른 글

introduce2.html  (0) 2016.09.24
jquery mobile 기본구문  (0) 2016.09.24
반응형 웹페이지 샘플 - photo  (0) 2016.09.10
반응형 웹 샘플  (0) 2016.09.10
9/3 수업파일  (0) 2016.09.03
'TIS_2016/주말반_4기' Related Articles more
Comments