Spin.js旋转的加载动画

爱被打了一巴掌 2022-08-13 11:48 151阅读 0赞

转载文章：[前端新兵][Link 1]

看到Spin官网的介绍：Uses VML as fallback in IEs，说是老的IE使用VML制作效果，IE6也支持，不过网上搜了一下VML，都推荐使用SVG了，IE10已经不支持VML，不过不管这些，我们要的就是加载的效果。

我们通常制作加载的动画效果都是使用一个gif的动态图片，来实现动态加载的效果，提高用户体验。而使用Spin这个js插件，就是什么也不用，只用js或是浏览器支持的技术来实现加载效果，可以看一下下面的效果：

上面的例子就是显示加载动画和删除加载动画的例子，不多说，直接上例子，最能帮助理解：

<script type="text/javascript" src="spin.js"></script> 
     
    <div id="foo" style="width:100%;height:100px;border:1px dotted #a0a0a0;"></div> 
    <p> 
    <button onclick = "startspin()">显示加载</button> 
    <button onclick = "stopspin()">停止加载</button> 
    </p> 
    <script type="text/javascript"> 
    var opts = { 
              lines: 10, // 画线的数量 
              length: 5, // 每条线的长度 
              width: 5, // 线的厚度 
              radius: 10, // 内圆的半径
              corners: 1, // 角的圆度 (0..1) 
              rotate: 0, // 旋转的偏移
              direction: 1, // 1: 顺时针, -1: 逆时针
              color: '#000', // #rgb 或 #rrggbb or 颜色数组
              speed: 1, // 每秒的旋转圈数 
              trail: 100, // 旋转余晖的百分比 
              shadow: false, // 是否显示阴影 
              hwaccel: false, // 是否使用硬件加速
              className: 'spinner', // 定义spinner的css类名
              position:'relative',  // 定义spinner的位置类型，和css里的position一样
              zIndex: 2e9, // The z-index (默认是 2000000000) 
              top: '50%', // 相对于父元素的顶部偏移量 
              left: '50%' // 相对于父元素的左部偏移量 
            }; 
            var target = document.getElementById("foo"); 
            var spinner = new Spinner(opts); 
            spinner.spin(target); 
    function startspin(){ 
        spinner.spin(target); 
    }        
    function stopspin(){ 
        spinner.stop(); 
    } 
    </script>

去看看演示： [演示地址][Link 2]

[Link 1]: http://api88.cn
[Link 2]: http://api88.cn/handbook/demo/spin/spin.html

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android实现ProgressBar旋转菊花加载的动画

Android实现ProgressBar旋转菊花加载的动画在一些常见到的加载中需要显示一个加载动画，如旋转的菊花这样的动画效果，开发中有两种方案，一种是直接让设计

曾经终败给现在/ 2023年10月17日 18:36/ 0 赞/ 25 阅读

相关液体加载动画

液体加载动画 ![在这里插入图片描述][20210418201110488.gif_pic_center] <!DOCTYPE html> <html>

我就是我/ 2023年01月13日 10:55/ 0 赞/ 149 阅读

相关加载动画转圈圈

<template> <div class="spinner" v-if="true"> <div class="spinner-conta

水深无声/ 2022年12月01日 05:17/ 0 赞/ 196 阅读

相关 Vue+Openlayer加载动画

> 注意：实现动画时不能有scoped！！！！通过gif ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q

红太狼/ 2022年09月08日 11:41/ 0 赞/ 247 阅读

相关豆瓣加载动画实现

最终效果如下 ![E7_AC_91_E8_84_B8.gif][] ValueAnimator类API 简介 ofFloat(float… values)

灰太狼/ 2022年08月22日 13:15/ 0 赞/ 229 阅读

相关 Spin.js旋转的加载动画

转载文章：[前端新兵][Link 1] 看到Spin官网的介绍：Uses VML as fallback in IEs，说是老的IE使用VML制作效果，IE6也支持，不

爱被打了一巴掌/ 2022年08月13日 11:48/ 0 赞/ 152 阅读

相关 RecyclerView Item加载动画

这段时间更新的博客内容不太系统，但也是平时比较常用的技术。今天和大家分享一篇关于ReclcyerView的内容。说到RecyclerView，想必大家都已玩

刺骨的言语ヽ痛彻心扉/ 2022年06月17日 13:39/ 0 赞/ 498 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 322 阅读

相关 HTML5加载动画

3、 [HTML5 Canvas奇幻色彩Loading加载动画][HTML5 Canvas_Loading] 之前我们分享过很多基于CSS3的Loading加

冷不防/ 2022年01月29日 08:45/ 0 赞/ 326 阅读

相关旋转动画

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

浅浅的花香味﹌/ 2021年11月11日 00:24/ 0 赞/ 372 阅读