Difference between revisions of "Template:NKU CHINA/header"

Line 6: Line 6:
 
     font-family: myTitle_first;
 
     font-family: myTitle_first;
 
     }
 
     }
 +
  .loading{width:100%; height: 100%;position: fixed;top:0;left: 0;z-index: 100;background: #ffffff;}
 +
            .loading .pic{
 +
            width: 64px;
 +
            height: 64px;
 +
            position: absolute;
 +
            top: 0;
 +
            bottom: 0;
 +
            left:0;
 +
            right:0;
 +
            margin: auto}
 +
 +
            .loading .pic i{
 +
                display: block;
 +
                float: left;
 +
                width: 6px;
 +
                height: 50px;
 +
                background: #399;
 +
                margin: 0 2px;
 +
                transform: scaleY(0.4);
 +
                animation: load 1.2s infinite;
 +
            }
 +
            .loading .pic i:nth-child(1){animation-delay:0.1s }
 +
            .loading .pic i:nth-child(2){animation-delay:0.2s }
 +
            .loading .pic i:nth-child(3){animation-delay:0.3s }
 +
            .loading .pic i:nth-child(4){animation-delay: 0.4s}
 +
            .loading .pic i:nth-child(5){animation-delay:0.5s }
 +
 +
            @keyframes load{
 +
                0%,40%,100%{transform: scaleY(0.4)}
 +
                20%{transform:scaleY(1) }
 +
            }
 
</style>
 
</style>
 +
<script type="text/javascript">
 +
        document.onreadystatechange=function(){
 +
            console.log(document.readyState);
 +
            if(document.readyState=="complete"){
 +
                $(".loading").fadeOut();
 +
            }
 +
        }
 +
</script>
 
</head>
 
</head>
 
     <header>
 
     <header>
 +
 +
        <div class="loading">
 +
            <div class="pic">
 +
                <i></i>
 +
                <i></i>
 +
                <i></i>
 +
                <i></i>
 +
                <i></i>
 +
            </div>
 +
        </div>
 
       <nav class="navbar-fixed-top navbar headerOfall">
 
       <nav class="navbar-fixed-top navbar headerOfall">
 
         <div class="container-fluid">
 
         <div class="container-fluid">

Revision as of 13:39, 12 October 2018