一个基于svg的圆形loading动画

最新推荐文章于 2025-07-13 16:54:17 发布
最新推荐文章于 2025-07-13 16:54:17 发布
阅读量4.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 web开发 文章标签： svg loading动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cdnight/article/details/48522495
本文介绍了一个基于SVG的加载动画控件的实现方法，包括HTML、CSS、JavaScript的使用，以及如何通过调整参数实现不同状态下的动画效果。兼容性方面，强调现代浏览器的良好支持，同时指出对于较旧浏览器的支持有限。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

很多时候大家都要做一些loading动画，现在给大家带来的是用svg画出来的loading动画，稍微封装就可以使用了。

代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/9/16
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>一个基于svg的loading控件。</title>
  <script type="text/javascript" src="/static/lib/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="/static/vendor/laytpl/laytpl.js"></script>
</head>
<body>
<h2>原型。</h2>
<svg width="200" height="200">
  <ellipse rx="90" ry="90" cx="100" cy="100" stroke="#f2f2f2" fill="none" stroke-width="10"></ellipse>
  <path fill="none" stroke="#3daf2c" stroke-width="10" d="M100,10 A90,90 0 1 1 10,90"></path>
</svg>
<h3>控件模样。</h3>
<div id="container">

</div>
<script type="text/javascript">
  function SVGLoading(_opts){
    var settings={
      strokeWidth:10 //边框宽度。
      ,strokeNormalColor:"#f2f2f2" //普通状态下边框颜色。
      ,strokeActivityColor:"#3daf2c" //激活状态下边框颜色。
      ,radius:80 //该圆形loading框的半径。
      ,percent:47 //当前默认显示的百分比。
      ,container:""
    };

    var appData={
      width:0
      ,height:0
      ,rx:0
      ,ry:0
      ,cx:0
      ,cy:0
      ,stroke1:""
      ,stroke2:""
      ,strokeWidth:0
      ,d:""
    };
    var _d_data={
      move_point:{x:0,y:0}
      ,radiusPoint:{x:0,y:0}
    };


    var _tpl_html='<svg width="{{d.width}}" height="{{d.height}}"><ellipse rx="{{d.rx}}" ry="{{d.ry}}" cx="{{d.cx}}" cy="{{d.cy}}" stroke="{{d.stroke1}}" fill="none" stroke-width="{{d.strokeWidth}}"></ellipse><path ui="path" fill="none" stroke="{{d.stroke2}}" stroke-width="{{d.strokeWidth}}" d="{{d.d}}"></path></svg>';

    var tpl=laytpl(_tpl_html);
    var _root="";
    var _el_path="";
    var app={
      init:function(){
        $.extend(settings,_opts);
        var _me=this;
        _me.initData();
        _me.initView();
      }
      //--计算原始的尺寸及其他信息。
      ,initData:function(){
        var me=this;
        appData.width=settings.radius*2;
        appData.height=settings.radius*2;
        appData.strokeWidth=settings.strokeWidth;
        appData.rx=parseInt((settings.radius-settings.strokeWidth));
        appData.ry=appData.rx;
        appData.cx=parseInt(settings.radius);
        appData.cy=appData.cx;
        appData.stroke1=settings.strokeNormalColor;
        appData.stroke2=settings.strokeActivityColor;
        _d_data.move_point={
          x:appData.cx
          ,y:appData.cy-appData.ry
        };
        _d_data.radiusPoint={
          x:appData.cx
          ,y:appData.cy
        };
      }
      ,initView:function(){
        var me=this;
        _root=$(settings.container);
        appData.d=me.caculateD(settings.percent);
        var html1=tpl.render(appData);
        _root.html(html1);
        _el_path=_root.find('[ui="path"]')[0];
      }
      //--计算 路径的d。
      ,caculateD:function(percent){

        var me=this;
        var _is_big_arc=false;
        var _realpercent=percent;
        if(_realpercent<0){
          _realpercent=0;
        }
        else if(_realpercent>100){
          _realpercent=100;
        }
        if(_realpercent>50){
          _is_big_arc=true;
        }
        var _endPoint=me.caculatePointByPercent(percent);

        var _bigArc=0;
        if(_is_big_arc){
          _bigArc=1;
        }

        var _str="M"+_d_data.move_point.x+","+_d_data.move_point.y+" A"+appData.rx+","+appData.rx+" 0 "+_bigArc+" 1 "+_endPoint.x+","+_endPoint.y+"";

        return _str;


      }
      //--计算 路径的d。
      ,caculateDbyAngle:function(angle){

        var me=this;
        var _is_big_arc=false;
        var _angle=360+angle;
        _angle=_angle%360;

        if(_angle>180){
          _is_big_arc=true;
        }
        var _endPoint=me.caculatePointByAngle(_angle);

        var _bigArc=0;
        if(_is_big_arc){
          _bigArc=1;
        }

        var _str="M"+_d_data.move_point.x+","+_d_data.move_point.y+" A"+appData.rx+","+appData.rx+" 0 "+_bigArc+" 1 "+_endPoint.x+","+_endPoint.y+"";

        return _str;


      }
      //--计算当前percent的终点。
      ,caculatePointByPercent:function(percent){
        var _res={x:0,y:0};
        /**
         圆点坐标：(x0,y0)
         半径：r
         角度：a0

         则圆上任一点为：（x1,y1）
         x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )
         y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )
         * */


         var Angle0=(percent/100)*360;
        Angle0=(360+Angle0-90)%360;
        _res.x= _d_data.radiusPoint.x+appData.rx*Math.cos(Angle0*Math.PI/180);
        _res.y= _d_data.radiusPoint.y+appData.rx*Math.sin(Angle0*Math.PI/180);

        return _res;
      }
      ,caculatePointByAngle:function(angle){
        var _res={x:0,y:0};
        /**
         圆点坐标：(x0,y0)
         半径：r
         角度：a0

         则圆上任一点为：（x1,y1）
         x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )
         y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )
         * */


        //处理一下角度问
                /**
                 * 为什么要这样处理?
                 * 因为我们看上去认为的角度跟实际上圆角的角度有90度的差距。
                 * 例如对于零度来说，在我们的圆形是 | 一条垂直的竖线就是零度了，但对于实际计算这个已经是902、度了。
                 * **/
        var Angle0=angle;
        Angle0=360+angle-90;
        Angle0=Angle0%360;

        _res.x= _d_data.radiusPoint.x+appData.rx*Math.cos(Angle0*Math.PI/180);
        _res.y= _d_data.radiusPoint.y+appData.rx*Math.sin(Angle0*Math.PI/180);
        //--注意，这个得到的坐标是以正常的坐标系，即，左下角x，从左到右为x，从下到上为y，现在这个不是，现在的页面的坐标系是从上到下才是y轴，y轴要处理一下。


        return _res;
      }
      ,setPercent:function(percent){
        var me=this;
        var _d_str=me.caculateD(percent);
        //_el_path.d=_d_str;
        $(_el_path).attr("d",_d_str);
      }
      ,setAngle:function(angle){
        var me=this;
        var _d_str=me.caculateDbyAngle(angle);
        //_el_path.d=_d_str;
        $(_el_path).attr("d",_d_str);
      }
    };


    app.init();

    var returnObject={
      setPercent:function(percent){
        app.setPercent(percent);
      }
      ,setAngle:function(angle){
        app.setAngle(angle);
      }

    };

    return returnObject;
  };
  var _loading={};
  function InitSVGLoading(){
    _loading=SVGLoading({
      container:$("#container")
    });
  };
  InitSVGLoading();
  var _current_percent=0;
 setInterval(function(){
    _loading.setPercent(_current_percent);
    _current_percent=_current_percent+0.1;
    _current_percent=_current_percent%100;

  },10);
</script>
</body>
</html>

jquery.js和laytpl.js请在网上下载。

效果

这里写图片描述

这里写图片描述

兼容性

大家别执着于兼容性了，ie6-9都恐怕没办法运行，但是，ios，安卓【假如不是古董级别】，chrome，safari，firefox都可以运行，作为一名开发html5的前端，这个兼容性还不够么。

svg loading动画
liuhao9999的博客
07-15 713
svg loading动画
SVG--loading动画
liuhao9999的博客
07-28 492
代码】SVG--loading动画。
HTML5 SVG页面加载动画设计集锦
最新发布
weixin_42602241的博客
07-13 432
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的矢量图形格式，用于描述二维矢量图形。由于其基于文本的格式，SVG图形可以无限放大而不失真，适合创建高质量的图形，且文件体积相对较小。每个CSS3动画都需要一个名称来标识，这个名称在@keyframes和属性中使用。关于动画的命名，最佳实践是使用有意义且描述性的名称，便于理解与维护。比如，对于一个渐变颜色的动画，我们可能会命名为或fade-in。
Svg描边Loading动画
weixin_45501045的博客
03-14 1177
​ 之前在浏览他人的博客时，看到loading动画是蒙娜丽莎的svg描边。觉得挺对自己胃口的，但是又不知道这样的效果怎么去实现，去b站刷了一些前端的学习视频，其中看到一个特别好看的动画特效。active状态下导航栏的每一个菜单项图标的动画描边，但是奈何不知道怎么把svg的图标放到butterfly的__config.yml当中，所以决定写一个svg的描边loading动画。​ svg图标的定义本文不再描述。
纯svg加载loading动画.zip
09-01
包含使用svg制作的加载loading动画。该加载loading动画特效共有11种效果，使用img标签直接调用svg文件来生成各种SVG动态图片。
13款html5 svg页面loading加载动画效果
12-13
这些3D转换可以包括旋转、缩放、平移等，使得loading动画更加立体生动。 3. HTML5库：虽然这个案例没有具体提及使用哪个HTML5库，但通常在开发此类复杂动画时，开发者可能会使用如GreenSock Animation Platform ...
SVG Loading加载动画特效特效代码
03-20
3. **SVG Loading动画类型** - 圆形加载：通常表现为环形进度条，通过改变SVG路径的描边长度来模拟加载过程。 - 线条加载：通过改变线条的宽度、位置或形状来实现动态加载效果。 - loading线条动画：可以是连续的...
css3 svg制作网页loading动画图标代码
11-05
"css3 svg制作网页loading动画图标代码"这个主题正是关于如何使用CSS3和SVG（Scalable Vector Graphics）技术来创建动态、吸引人的加载图标。下面将详细介绍这两个技术以及它们在创建网页加载动画中的应用。 **CSS3...
html5 svg加载loading动画炫酷特效 12种.zip
11-03
本资源“html5 svg加载loading动画炫酷特效 12种.zip”包含了一系列基于HTML5和SVG的加载loading动画特效，这些特效能够为网站增添视觉吸引力，提升用户体验。以下是关于这些特效及其背后关键技术的详细解释： 1. *...
超干货 CSS3/SVG Loading动画集合
huang714的专栏
09-29 6292
随着css3实现各种炫酷动画效果越来越流行。今天给大家推荐一些css3和SVG实现loading加载动画效果。 先上一波令人愉悦的动画效果。 怎么样，是不是感觉很nice，那就继续往下看吧。这里为大家整理了一些不错的效果。 1、CSSFX 简单酷炸的css3效果，可一键复制css样式。 # 演示地址 https://cssfx.lovejade.cn/ # github地址 https://github.com/Th...
SVG Loading加载动画特效.zip
07-04
SVG Loading加载动画特效是一款css3 svg圆形加载，线条加载，loading线条动画特效。
HTML5 SVG Loading 动画加载特效.rar
07-10
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ，一共是4个网页加载特效动画，这些Loading看上去是不是很眼熟，在手机上或PC端见到的几率比较大，纯HTML5 SVG技术实现，没有使用任何图片资源，而且个个精美。测试请使用支持CSS3技术的浏览器哦。
12个SVG Loading图标
11-27
共12个SVG Loading图标，只有svg 用于移动开发或html5 都可以哦！
SVG实现的一组超华丽Loading加载动画
08-23
Loading动画我们已经分享过很多了，大部分都是基于纯CSS3的，或者有些也有jQuery协助完成。比如这个10组蓝色风格的纯CSS3 Loading动画图标就非常实用。今天我们要分享的是一组基于SVG的超华丽Loading加载动画，利用SVG的路径特性，动态绘制形状和状态，从而产生Loading加载的视觉效果，同样也非常实用，因为现在所有浏览器都支持SVG了。
loading.svg
08-08
一个svg动画文档，网页加载的进度条。
纯SVG实现的Loading动画，拿走不谢
weixin_30838921的博客
03-27 522
转载自：https://blog.youkuaiyun.com/wo_shi_ma_nong/article/details/88833828 话不多说，直接上代码。 （ 到这里看效果：http://www.var6.cn/work/1/22/MD的编程作品） 第一个： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
CSS描边动画，后端直呼哇塞
很高兴你能看到这里
04-04 5194
你们好啊，我来分享代码了，先看看效果，吼吼，后端看了表示很哇塞。
分享记录一个svg的loading加载动画
weixin_41993525的博客
08-05 467
分享记录一个svg的loading加载动画，如图所示，内圈由若干个灰色圆点构成，以较慢的速度旋转；外圈是一个长短交替的圆环进行旋转。 <svg class="load" viewBox="10 10 80 80"> <circle cx="50" cy="50" r="30" stroke="#eee" stroke-width="6" fill="none" stroke-dasharray="1,18" stroke-linecap="round" />
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值