不用gif图,用js+css实现loading效果
2016-03-22 17:36
846 查看
要理解loading的原理,即在文档加载完成之前显示loading效果,隐藏主文档内容,而在文档加载完成之后,隐藏loading效果,显示主文档内容。
<!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>CSS关键代码:
/*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; }
相关文章推荐
- 理解CSS中position的各个值
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
- Css3之基础-8 Css 浮动(定位,浮动定位)
- 深入理解CSS定位中的堆叠z-index
- BaseAdapter的三样式 IV
- windows下使用django前台无法载入css的解决办法
- link与@import
- 样式表(课堂代码)
- CSS学习
- css实现360导航首页超链接变色
- css 3D相册,旋转木马练习
- CSS_样式、选择器、继承_tag
- 课堂所讲整理:样式表
- Html+CSS CSS(CSS3) 3种清除浮动的方法
- css
- HTML CSS样式表
- CSS
- css读书笔记1:HTML标记和文档结构
- HTML CSS样式
- HTML样式表,选择器