簡單的頁面loading效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #page-preloader {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: #f1f3f2;
      z-index: 100500;
    }
    #page-preloader .spinner {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      margin-top: -50px;
      margin-left: -50px;
      border: 3px solid transparent;
      border-top-color: #ff6400;
      border-radius: 50%;
      z-index: 1001;
      -webkit-animation: spin 2.5s infinite linear;
      animation: spin 2.5s infinite linear;
    }
    #page-preloader .spinner:before {
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border: 3px solid transparent;
      border-top-color: #088cdc;
      -webkit-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;
    }
    #page-preloader .spinner:after {
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border: 3px solid transparent;
      border-top-color: #52bf81;
      -webkit-animation: spin 1s infinite linear;
      animation: spin 1s infinite linear;
    }
    #page-preloader .spinner:before, #page-preloader .spinner:after {
      content: '';
      position: absolute;
      border-radius: 50%;
    }
    @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
      100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

    @keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
      100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
  </style>
</head>
<body>
<div id="page-preloader"><span class="spinner"></span></div>


<script src="js/jquery-1.11.3.min.js"></script>
<script>
  $(window).on('load', function () {
    var $preloader = $('#page-preloader'),
    $spinner = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(350).fadeOut(800);
  });
</script>
</body>
</html>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .circle{
                background-color:#B0865B;
                width:15px;
                height:15px;
                border-radius:100%;
                margin:2px;
                border:2px solid #B0865B;
                border-bottom-color:transparent;
                height:80px;
                width:80px;
                background:0 0!important;
                display:inline-block;
                animation:rotate .75s 0s linear infinite;
            }
            @keyframes rotate{
                0%{transform:rotate(0deg)}
                50%{transform:rotate(180deg)}
                100%{transform:rotate(360deg)}}
        </style>
    </head>
    <body>
        <div class="circle">
            
        </div>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容