前端加载动画/加载等待动画

  • 在加载前端的数据的时候,很多时候不能用进度条来衡量不定数据量。此时加载动画就有用武之地了。可以在数据请求时显示加载动画,等动画加载完成再隐藏加载动画,让前端更具交互友好性。

  • 网上百度了很多关于这方面的资料,但是好多感觉都很繁琐,本着偷懒的心态,在html5应用开发框架ionic中找到了该加载动画的库

  • 和其他开发库类似,首先需要加载该库的js 和 css,然后在html中直接使用即可。接下来关于使用和在使用过程中遇到的问题做下记录。


ionic简单介绍

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。

  1. ionic 基于Angular语法,简单易学。
  2. ionic 是一个轻量级框架。
  3. ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
  4. ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  5. ionic 专注原生,让你看不出混合应用和原生的区别
  6. ionic 提供了强大的命令行工具。
  7. ionic 性能优越,运行速度快
更多介绍:

> http://www.runoob.com/ionic/ionic-tutorial.html

加载动画在前端的使用

  • 首先需要加载ionic的js和css,这步可以使用国内bootcdn服务:

http://www.bootcdn.cn/ionic/

  • 创建ionic应用并初始化App

 1. 初始化app:angular.module('todo', ['ionic'])
 2. 在加载动画模块添加ng-app="ionicApp"
  • 遇到的问题

 1. 已经在前端使用了bootstrap框架的样式了,新添加ionic样式导致界面出现问题;
 2. 加载动画未能居中显示
  • 解决问题

 1. 删除ionic样式的引用,只使用js文件
 2. 单独设置加载动画的样式
  • 完成后的代码
<div class="row" ng-app="ionicApp" id="spinnerDiv">
    <div class="col-lg-6 col-lg-offset-3">
        <p style="width:15%; margin: auto ;padding-top:10px">
            <ion-spinner icon="bubbles" style="width:10%;stroke:#33cd5f;fill:#33cd5f;">ion-spinner>
        p>
    div>
div>

<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js">script>
<script>
    angular.module('ionicApp', ['ionic'])
script>
  • 效果
    前端加载动画/加载等待动画_第1张图片
  • 扩展
    其他加载动画样式
    前端加载动画/加载等待动画_第2张图片

    首先:在ionic的ionic.mini.css中找到class的样式设置;
    然后:将样式使用style进行设置即可;
    例子:

<html ng-app="ionicApp">
<div class="row" ng-app="ionicApp" id="spinnerDiv">
    <div class="col-lg-6 col-lg-offset-3">
        <p style="width:15%; margin: auto ;padding-top:10px">
           <ion-spinner icon="lines" style="stroke:#11c1f3;fill:#11c1f3">ion-spinner>
        p>
    div>
div>

<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js">script>
<script>
    angular.module('ionicApp', ['ionic'])
script>
html>

前端加载动画/加载等待动画_第3张图片

小结

到此就是加载动画在前端的使用,其他的样式可以参照”扩展”进行设置。

ionic Spinner: http://www.runoob.com/ionic/ionic-ion-spinner.html

你可能感兴趣的:(前端,spinner,前端,加载动画)