svg实现loading图

最新推荐文章于 2025-09-26 01:01:24 发布
原创 最新推荐文章于 2025-09-26 01:01:24 发布 · 2.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用SVG的stroke-dasharray和stroke-dashoffset属性创建动画，特别是在实现loading图时的关键步骤。通过调整这两个属性的值，分别处理鱼鳍、鱼眼睛和鱼身子的动画效果。需要注意的是，stroke-dashoffset可以取负值，这一知识点在初期实现中造成了反向效果的问题。最终，文章还讨论了实现效果的兼容性问题。
部署运行你感兴趣的模型镜像

本文主要针对我工作遇到的问题，类似于笔记。
首先想要实现svg的动画要首先了解svg中的两个属性：stroke-dasharray；stroke-dashoffset；
stroke-dasharray：就是虚线属性，可以写多个值；
stroke-dashoffset：可以理解为空隙；
注：stroke-dashoffset的值可以为负数；
根据UI给的SVG格式的文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03">
            <defs>
                <style>
                    .cls-1,.cls-2,.cls-3{
                        fill:none;
                        stroke:#3eb2de;
                        stroke-linejoin:round;
                    }
                    .cls-1,.cls-2{
                        stroke-linecap:round;
                    }
                    .cls-1{
                        stroke-width:2px;
                    }
                    .cls-2,.cls-3{
                        stroke-width:3px;
                    }
                    .cls-4{
                        clip-path:url(#clip-path);
                    }
                    .cls-g{
                        stroke:#ccc
                    }
                </style>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </clipPath>
            </defs>
            <title>loading-2</title>
            <g id="layer_2" data-name="layer 2">
                <g id="layer_1-2" data-name="layer 1">
                    <path class="cls-2  cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                    <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                    <g class="cls-4">
                        <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>
                    </g>
                    <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </g>
            </g>
            <defs>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </clipPath>
            </defs>
            <title>loading-2</title>
                <g id="layer_2" data-name="layer 2">
                    <g id="layer_1-2" data-name="layer 1">
                        <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                        <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                        <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/></g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                    </g>
                </g>

        </svg>

然后给了我效果图效果图
主要过程呢分为三段，一个是鱼鳍，鱼眼睛，鱼身子，通过改变上述两个的值从而实现，但是过程中因为不知道stroke-dashoffset的值可以为负数所以导致效果是反的。这点要注意。
最后的实现效果加上兼容。

    <style>
        .cls-1-a{
            stroke-dasharray:7 7;
            stroke-dashoffset:-7;
            animation: lineMoveCls1 1.64s ease-in-out infinite;
        }
        .cls-2-a{
            stroke-dasharray:153 153;
            stroke-dashoffset:-153;
            animation: lineMoveCls2 1.64s ease-in-out infinite;
        }
        .cls-3-a{
            stroke-dasharray:23 23;
            stroke-dashoffset:-23;
            animation: lineMoveCls3 1.64s ease-in-out infinite;
        }
        .loading-svg-fish{
            position: relative;
            width: 1.36rem;
            height: 1.24rem;
        }
        .fishpond-index{
            height: 100vh;
            display:flex;
            display:-webkit-flex;
            display:-moz-flex;
            display:-o-flex;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -o-align-items: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
             flex-direction: column;
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -o-flex-direction: column;
        }
        .loading-write-fish{
            font-size:0.52rem ;
            color: #ccc;
            margin-top: 0.48rem;
        }
        svg{
            position: absolute;
            left: 0;
            top: 0;
            width: 1.36rem;
            height: 1.24rem;
        }
        .cls-1,.cls-2,.cls-3{
            fill:none;
            stroke:#3eb2de;
            stroke-linejoin:round;
        }
        .cls-1,.cls-2{
            stroke-linecap:round;
        }
        .cls-1{
            stroke-width:2px;
        }
        .cls-2,.cls-3{
            stroke-width:3px;
        }
        .cls-4{
            clip-path:url(#clip-path);
        }
        .cls-g{
            stroke:#ccc
        }
        @keyframes lineMoveCls1 {
            0%{
                stroke-dashoffset:-7 ;
            }
            10%{
                stroke-dashoffset:0 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:7 ;
            }
            70%{
                stroke-dashoffset: 7;
            }
            80%{
                stroke-dashoffset:7 ;
            }
            90%{
                stroke-dashoffset:7 ;
            }
            100%{
                stroke-dashoffset: 7;
            }
        }
        @-webkit-keyframes lineMoveCls1 {
            0%{
                stroke-dashoffset:-7 ;
            }
            10%{
                stroke-dashoffset:0 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:7 ;
            }
            70%{
                stroke-dashoffset: 7;
            }
            80%{
                stroke-dashoffset:7 ;
            }
            90%{
                stroke-dashoffset:7 ;
            }
            100%{
                stroke-dashoffset: 7;
            }
        }
        @-moz-keyframes lineMoveCls1 {
            0%{
                stroke-dashoffset:-7 ;
            }
            10%{
                stroke-dashoffset:0 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:7 ;
            }
            70%{
                stroke-dashoffset: 7;
            }
            80%{
                stroke-dashoffset:7 ;
            }
            90%{
                stroke-dashoffset:7 ;
            }
            100%{
                stroke-dashoffset: 7;
            }
        }
        @-o-keyframes lineMoveCls1 {
            0%{
                stroke-dashoffset:-7 ;
            }
            10%{
                stroke-dashoffset:0 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:7 ;
            }
            70%{
                stroke-dashoffset: 7;
            }
            80%{
                stroke-dashoffset:7 ;
            }
            90%{
                stroke-dashoffset:7 ;
            }
            100%{
                stroke-dashoffset: 7;
            }
        }
        @keyframes lineMoveCls3 {
            0%{
                stroke-dashoffset:-23 ;
            }
            10%{
                stroke-dashoffset:-23 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 23;
            }
            80%{
                stroke-dashoffset:23 ;
            }
            90%{
                stroke-dashoffset:23 ;
            }
            100%{
                stroke-dashoffset: 23;
            }
        }
        @-webkit-keyframes lineMoveCls3 {
            0%{
                stroke-dashoffset:-23 ;
            }
            10%{
                stroke-dashoffset:-23 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 23;
            }
            80%{
                stroke-dashoffset:23 ;
            }
            90%{
                stroke-dashoffset:23 ;
            }
            100%{
                stroke-dashoffset: 23;
            }
        }
        @-moz-keyframes lineMoveCls3 {
            0%{
                stroke-dashoffset:-23 ;
            }
            10%{
                stroke-dashoffset:-23 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 23;
            }
            80%{
                stroke-dashoffset:23 ;
            }
            90%{
                stroke-dashoffset:23 ;
            }
            100%{
                stroke-dashoffset: 23;
            }
        }
        @-o-keyframes lineMoveCls3 {
            0%{
                stroke-dashoffset:-23 ;
            }
            10%{
                stroke-dashoffset:-23 ;
            }
            20%{
                stroke-dashoffset:0 ;
            }
            30%{
                stroke-dashoffset:0 ;
            }
            40%{
                stroke-dashoffset:0 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 23;
            }
            80%{
                stroke-dashoffset:23 ;
            }
            90%{
                stroke-dashoffset:23 ;
            }
            100%{
                stroke-dashoffset: 23;
            }
        }
        @keyframes lineMoveCls2 {
            0%{
                stroke-dashoffset:-153 ;
            }
            10%{
                stroke-dashoffset:-153 ;
            }
            20%{
                stroke-dashoffset:-153 ;
            }
            30%{
                stroke-dashoffset:-102 ;
            }
            40%{
                stroke-dashoffset:-51 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 0;
            }
            80%{
                stroke-dashoffset:51 ;
            }
            90%{
                stroke-dashoffset:102 ;
            }
            100%{
                stroke-dashoffset: 153;
            }
        }   
        @-webkit-keyframes lineMoveCls2 {
            0%{
                stroke-dashoffset:-153 ;
            }
            10%{
                stroke-dashoffset:-153 ;
            }
            20%{
                stroke-dashoffset:-153 ;
            }
            30%{
                stroke-dashoffset:-102 ;
            }
            40%{
                stroke-dashoffset:-51 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 0;
            }
            80%{
                stroke-dashoffset:51 ;
            }
            90%{
                stroke-dashoffset:102 ;
            }
            100%{
                stroke-dashoffset: 153;
            }
        }       
        @-moz-keyframes lineMoveCls2 {
            0%{
                stroke-dashoffset:-153 ;
            }
            10%{
                stroke-dashoffset:-153 ;
            }
            20%{
                stroke-dashoffset:-153 ;
            }
            30%{
                stroke-dashoffset:-102 ;
            }
            40%{
                stroke-dashoffset:-51 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 0;
            }
            80%{
                stroke-dashoffset:51 ;
            }
            90%{
                stroke-dashoffset:102 ;
            }
            100%{
                stroke-dashoffset: 153;
            }
        }   
        @-o-keyframes lineMoveCls2 {
            0%{
                stroke-dashoffset:-153 ;
            }
            10%{
                stroke-dashoffset:-153 ;
            }
            20%{
                stroke-dashoffset:-153 ;
            }
            30%{
                stroke-dashoffset:-102 ;
            }
            40%{
                stroke-dashoffset:-51 ;
            }
            50%{
                stroke-dashoffset:0 ;
            }
            60%{
                stroke-dashoffset:0 ;
            }
            70%{
                stroke-dashoffset: 0;
            }
            80%{
                stroke-dashoffset:51 ;
            }
            90%{
                stroke-dashoffset:102 ;
            }
            100%{
                stroke-dashoffset: 153;
            }
        }
    </style>
<div class="fish-loading">
    <div class="loading-svg-fish">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03">
            <defs>
                <style>
                    .cls-1,.cls-2,.cls-3{
                        fill:none;
                        stroke:#3eb2de;
                        stroke-linejoin:round;
                    }
                    .cls-1,.cls-2{
                        stroke-linecap:round;
                    }
                    .cls-1{
                        stroke-width:2px;
                    }
                    .cls-2,.cls-3{
                        stroke-width:3px;
                    }
                    .cls-4{
                        clip-path:url(#clip-path);
                    }
                    .cls-g{
                        stroke:#ccc
                    }
                </style>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </clipPath>
            </defs>
            <title>loading-2</title>
            <g id="layer_2" data-name="layer 2">
                <g id="layer_1-2" data-name="layer 1">
                    <path class="cls-2  cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                    <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                    <g class="cls-4">
                        <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>
                    </g>
                    <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </g>
            </g>
            <defs>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                </clipPath>
            </defs>
            <title>loading-2</title>
                <g id="layer_2" data-name="layer 2">
                    <g id="layer_1-2" data-name="layer 1">
                        <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                        <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                        <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/></g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                    </g>
                </g>

        </svg>
    </div>
    <div class="loading-write-fish">
        loading
    </div>
</div>

您可能感兴趣的与本文相关的镜像

Kotaemon

Kotaemon

AI应用

Kotaemon 是由Cinnamon 开发的开源项目，是一个RAG UI页面,主要面向DocQA的终端用户和构建自己RAG pipeline

SVG实现loading
classOurself的博客
06-18 338
SVG实现loading <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-sc
SVG实现Loading加载按钮动画图标特效.zip
09-27
这个压缩包文件"SVG实现Loading加载按钮动画图标特效.zip"包含了实现SVG加载动画效果的相关资源，包括HTML、JavaScript（js）和CSS（样式表）文件。下面我们将详细探讨SVG、加载动画以及如何通过这些技术来创建按钮...
loading.svg
08-08
一个svg动画文档，网页加载的进度条。
10款华丽的SVG Loading加载动画效果
06-11
10款华丽的SVG Loading加载动画效果，利用SVG的路径特性，动态绘制形状和状态，从而产生Loading加载的视觉效果。
Glide加载SVG图片：从网络到显示的完整流程
最新发布
gitblog_01078的博客
09-26 440
在Android应用开发中，SVG（Scalable Vector Graphics）图片凭借其无损缩放特性，成为图标和简单图形的理想选择。本文将以Glide图片加载库为例，详细讲解如何从网络或本地资源加载并显示SVG图片，包含完整实现流程和关键代码解析。 ## 开发准备与项目结构 SVG加载功能位于Glide示例项目的svg模块中，核心文件结构如下： ``` samples/svg/src...
12个SVG Loading图标
11-27
共12个SVG Loading图标，只有svg 用于移动开发或html5 都可以哦！
svg实现loading效果
weixin_41848005的博客
01-25 1169
<svg class="circular" viewbox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" /> </svg> html, body { width: 100%; height: 100%; display: flex; } .circular { width: 100px; height: 100px; animation: .
【亲测免费】 推荐项目：Loading-SVG - 美观且可定制的SVG加载图标库
gitblog_00015的博客
05-11 1372
推荐项目：Loading-SVG - 美观且可定制的SVG加载图标库 项目介绍 在网页和应用程序开发中，加载图标是用户体验的重要组成部分。loading-svg 是一个由Brent Jackson创建的开源项目，它提供了动态SVG加载图标的解决方案。这个项目不仅仅是一个简单的一次性设计，而是提供了一个可自定义的颜色和样式的SVG加载动画模板，让你可以轻松地为你的项目增添个性化的加载体验。 项目技术...
图片懒加载svg-loading图片
11-18
在"loading-svg图片"这个主题中，我们将探讨如何使用SVG实现一个动态的加载指示器，并将其应用到图片懒加载技术中。首先，我们需要创建一个SVG元素，定义其形状、路径或符号，并利用CSS或者JavaScript来控制其动画...
纯svg加载loading动画.zip
09-01
在本压缩包“纯svg加载loading动画.zip”中，包含了11种不同的SVG加载动画效果。这些动画是通过编写SVG代码并结合CSS或JavaScript来实现动态效果的。每一种效果都通过`<img>`标签直接调用SVG文件，这种方式简洁高效...
12个SVG Loading图标演示
11-07
12个SVG Loading图标演示 12个SVG Loading图标演示 12个SVG Loading图标演示
SVG动画图loading
04-17
用于等待层动画
HTML5 SVG Loading 动画加载特效.rar
07-10
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ，一共是4个网页加载特效动画，这些Loading看上去是不是很眼熟，在手机上或PC端见到的几率比较大，纯HTML5 SVG技术实现，没有使用任何图片资源，而且个个精美。测试请使用支持CSS3技术的浏览器哦。
jQuery SVG实现Loading加载按钮动画图标特效.zip
07-11
<button class="control-button bordered make-it-fail">Make it fail <button class="loading-button circular-loading top">... 一款个性好看的基于SVG实现的Loading加载按钮动画图标特效，SVG加载按钮动画代码。
svg loading动画
weixin_53165181的博客
05-25 706
svg 绘制 loading
svg圆圈loading的实现
userkang的博客
12-03 2154
效果： 代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;initial-scale=1, minimum-scale=1, maximum
loading效果 svg实现
weixin_38233449的博客
03-29 567
【代码】loading效果 svg实现。
SVG图片懒加载与loading效果实现
其中，“图片懒加载”（Lazy Loading）与“使用SVG作为Loading占位图”是两个被广泛采用的技术手段，尤其适用于内容丰富、图像密集型的网站，如电商平台、社交网络和新闻门户等。本文将围绕标题“图片懒加载svg-...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值