《前端》loading效果-2020年10月13日

最新推荐文章于 2024-07-19 20:55:59 发布

bellediao

最新推荐文章于 2024-07-19 20:55:59 发布

阅读量370

点赞数

分类专栏：前端 CSS

原文链接：https://www.jq22.com/jquery-info93

版权

前端同时被 2 个专栏收录

257 篇文章 1 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

今天我单位的师傅让我帮他解决一个loading的问题。原来是有专门做这个的。网址如下：

spin.js http://spin.js.org/

spin.js CDN 加速服务 https://www.bootcdn.cn/spin.js/

加载loading动画相信大家都经常看到，当我们需要从服务端异步无刷新加载一条数据的时候，考虑到会花费一定时间，而在这段时间内会呈现一个假死的状态，而这种状态时不能直接显示给用户的，那么这时我们就会用一个加载动画来告诉用户，数据正在加载中。
实现加载动画可以用一张预先做好的gif动态图片，但这种方式有一个缺点，做好的gif图片的大小和速度等参数都已经定死了，而要修改这些一张动态图片也是很麻烦的一件事。

所以今天我给大家介绍一款由js实现的loading动画，我们可以在使用中自定义各个参数，部署方便，很实用。

使用步骤：

1、引入以下的js和css文件,其实该插件并不依赖于jquery库，在这里引用jquery只是为了方便使用

<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>

2、在head标签中加入以下js代码

   <script type="text/javascript">
       $(function(){
           var opts = {
               //参数列表
           };
           var target = document.getElementById('foo');
           var spinner = new Spinner(opts).spin(target);// 执行的结果为初始化spin，并且直接调用(显示)这个加载动画。

spinner.stop();// 隐藏动画，执行这个
       })
   </script>

3、在body标签中加入以下格式的html代码,实际上就是一个使用到loading动画的标签，注意这里的id要和上面调用函数的id相同

<div id="foo">
</div>

参数配置：

我们将spin的参数定义在opts集合中

   var opts = {
       lines: 13, // loading小块的数量
       length: 7, // 小块的长度
       width: 4, // 小块的宽度
       radius: 10, // 整个圆形的半径
       corners: 1, // 小块的圆角，越大则越圆
       rotate: 0, // loading动画的旋转度数，貌似没什么实际作用
       color: '#000', // 颜色
       speed: 1, // 变换速度
       trail: 60, // 余晖的百分比
       shadow: false, // 是否渲染出阴影
       hwaccel: false, // 是否启用硬件加速
       className: 'spinner', // 给loading添加的css样式名
       zIndex: 2e9, // The z-index (defaults to 2000000000)
       top: 'auto', // Top position relative to parent in px
       left: 'auto' // Left position relative to parent in px
   };

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading展示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/spin.js/1.0.0/spin.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="foo">
    </div>
    <script>
        $(function() {
            var opts = {
                lines: 9, // The number of lines to draw
                length: 0, // The length of each line
                width: 10, // The line thickness
                radius: 15, // The radius of the inner circle
                corners: 1, // Corner roundness (0..1)
                rotate: 0, // The rotation offset
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // The CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            };
            var target = document.getElementById('foo');
            var spinner = new Spinner(opts).spin(target); //初始化spin，并且直接调用(显示)这个加载动画

        })
    </script>

</body>

</html>

var spinner = new Spinner(opts).spin(target);

该语句执行的结果为初始化spin，并且直接调用(显示)这个加载动画。可能会给初学者带来困惑。

建议改为：

   var opts = {
   //参数列表...
   };
   var target = document.getElementById('foo');
   //初始化spin-初始化函数中
   var spinner = new Spinner(opts);//建议将spinner作为全局变量，以方便后面的调用。

   spinner.spin(target);//显示进度动画
   spinner.stop();//隐藏进度动画

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading展示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/spin.js/1.0.0/spin.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="foo">
    </div>
    <script>
        $(function() {
            var opts = {
                lines: 9, // The number of lines to draw
                length: 0, // The length of each line
                width: 10, // The line thickness
                radius: 15, // The radius of the inner circle
                corners: 1, // Corner roundness (0..1)
                rotate: 0, // The rotation offset
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // The CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            };
            var target = document.getElementById('foo');
            //初始化spin-初始化函数中
            var spinner = new Spinner(opts); //建议将spinner作为全局变量，以方便后面的调用。
            spinner.spin(target);//显示进度动画
            debugger
            spinner.stop(); //隐藏进度动画

        })
    </script>

</body>

</html>

网上其他人的例子

js获取页面加载过程做一个简单的loading_记录踩过的坑只为了更好地填坑-CSDN博客 https://blog.csdn.net/u011108439/article/details/51008214?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

网页加载缓慢时，两种方法实现loading效果_qq_42177730的博客-CSDN博客 https://blog.csdn.net/qq_42177730/article/details/81199103?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param