欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

SVG(网页加载显示的加载进度动态图)

发布时间:2025/4/16 编程问答 1 豆豆
生活随笔 收集整理的这篇文章主要介绍了 SVG(网页加载显示的加载进度动态图) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8" />
        <title>loading</title>
        <style>
            svg {
             border: 1px solid black;
            }
            circle, path {
                fill: transparent;
                stroke: orange;
                stroke-width: 10px;
                stroke-linecap: round;
            }
            circle {
                stroke:rgba(255, 150, 0, 0.5);
            }
        </style>
    </head>
    <body>
        <svg width="100" height="100">
            <circle r="40" cx="50" cy="50"></circle>
            <path d="M 10 50 A 40 40 0 0 1 50 10">
                <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.5s" repeatCount="indefinite"/>
            </path>
        </svg>
    </body>
</html>

 

转载于:https://my.oschina.net/korabear/blog/1788792

总结

以上是生活随笔为你收集整理的SVG(网页加载显示的加载进度动态图)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。