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

最新推荐文章于 2026-05-25 08:59:39 发布

原创最新推荐文章于 2026-05-25 08:59:39 发布 · 1.2w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#spinner #前端 #加载动画

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在前端数据加载时如何使用加载动画提高用户体验。通过引入Ionic框架，详细阐述了如何加载库、创建应用以及解决在使用过程中遇到的问题。文章还提供了一个简单的应用实例，并指导如何自定义加载动画的样式。

在加载前端的数据的时候，很多时候不能用进度条来衡量不定数据量。此时加载动画就有用武之地了。可以在数据请求时显示加载动画，等动画加载完成再隐藏加载动画，让前端更具交互友好性。
网上百度了很多关于这方面的资料，但是好多感觉都很繁琐，本着偷懒的心态，在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


 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><!--bubbles加载动画的样式-->
        </p>
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

效果
扩展
其他加载动画样式

首先：在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><!--bubbles加载动画的样式-->
        </p>
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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