在加载前端的数据的时候,很多时候不能用进度条来衡量不定数据量。此时加载动画就有用武之地了。可以在数据请求时显示加载动画,等动画加载完成再隐藏加载动画,让前端更具交互友好性。
网上百度了很多关于这方面的资料,但是好多感觉都很繁琐,本着偷懒的心态,在html5应用开发框架ionic中找到了该加载动画的库
和其他开发库类似,首先需要加载该库的js 和 css,然后在html中直接使用即可。接下来关于使用和在使用过程中遇到的问题做下记录。
ionic简单介绍
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。
- ionic 基于Angular语法,简单易学。
- ionic 是一个轻量级框架。
- ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
- ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
- ionic 专注原生,让你看不出混合应用和原生的区别
- ionic 提供了强大的命令行工具。
- ionic 性能优越,运行速度快
更多介绍:
> http://www.runoob.com/ionic/ionic-tutorial.html
加载动画在前端的使用
- 首先需要加载ionic的js和css,这步可以使用国内bootcdn服务:
http://www.bootcdn.cn/ionic/
<link href="//cdn.bootcss.com/ionic/1.3.2/css/ionic.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
- 创建ionic应用并初始化App
<