不用gif圖，用js+css實現loading效果
阿新 • • 發佈：2019-01-30
要理解loading的原理，即在文件載入完成之前顯示loading效果，隱藏主文件內容，而在文件載入完成之後，隱藏loading效果，顯示主文件內容。
CSS關鍵程式碼：<!DOCTYPE html> <html lang="zh_CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <title>loading的簡單實現</title> <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <script src="lib/ionic/js/jquery-2.1.3.min.js"></script> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> </head> <body ng-app="myApp"> <!--設定預載入效果--> <div class="spinner"> <div class="dot1"></div> <div class="dot2"></div> </div> <ion-content class="page-one" ng-controller="FirstController"> <div class="row"> <div class="col"> <img src="img/header1.png"> </div> </div> </ion-content> </body> <script> $(document).ready(function(){ $(".spinner").hide(); $(".page-one").show(); }); </script> </html>
/*loading效果*/ .spinner { margin: 25% auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #2d7cea; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .page-one{ display: none; }