svg圆盘加载动画效果代码
代码语言：html
所属分类：动画
代码描述：svg圆盘加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: black;
position: relative;
width: 100%;
}
svg {
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
-
<svg width="200" height="200" viewBox="0 0 790 790" shape-rendering="geometricPrecision">
<defs>
<mask id="mask">
<image id="maskImage" transform="rotate(50 395 395)" xlink:href="//repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png" x="0" y="0" height="100%" width="100%">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 395 395" to="360 395 395" dur="1.8s" repeatCount="indefinite" />
</image>
</mask>
</defs>
<rect width="100%" height="100%" fill="black" />
<g fill="#363636" id="grey">
<path d="M399,173.245c0,2.209-1.791,4-4,4l0,0c-2.209,0-4-1.791-4-4v-162c0-2.209,1.791-4,4-4l0,0
c2.209,0,4,1.791,4,4V173.245z" />
<path d="M379.658,173.74c0.192,2.201-1.436,4.141-3.637,4.333l0,0c-2.2,0.193-4.141-1.436-4.333-3.636
L357.569,13.054c-0.192-2.201,1.436-4.141,3.636-4.333l0,0c2.201-0.192,4.141,1.436,4.334,3.636L379.658,173.74z" />
<path d="M360.433,175.919c0.384,2.175-1.068,4.25-3.245,4.634l0,0c-2.175,0.384-4.25-1.069-4.633-3.245
L324.424,17.77c-0.384-2.175,1.069-4.25,3.243-4.634l0,0c2.177-0.383,4.251,1.069,4.635,3.245L360.433,175.919z" />
<path d="M341.47,179.765c0.572,2.134-0.693,4.328-2.828,4.9l0,0c-2.133,0.572-4.327-0.695-4.898-2.829
l-41.929-156.48c-0.571-2.134,0.695-4.328,2.827-4.899l0,0c2.136-0.571,4.328,0.695,4.9,2.829L341.47,179.765z" />
<path d="M322.915,185.25c0.756,2.076-0.313,4.372-2.391,5.128l0,0c-2.074,0.756-4.371-0.315-5.126-2.391
l-55.407-152.23c-0.755-2.076,0.315-4.372,2.389-5.127l0,0c2.078-0.756,4.372,0.314,5.129,2.391L322.915,185.25z" />
<path d="M304.909,192.331c0.934,2.002,0.068,4.383-1.936,5.317l0,0c-2,0.934-4.382,0.067-5.314-1.936
L229.195,48.891c-0.934-2.003-0.066-4.383,1.933-5.316l0,0c2.004-0.934,4.383-0.068,5.318,1.935L304.909,192.331z" />
<path d="M287.589,200.954c1.104,1.913,0.45,4.36-1.465,5.466l0,0c-1.911,1.104-4.359,0.448-5.463-1.465l-81-140.295
c-1.104-1.914-0.448-4.361,1.462-5.464l0,0c1.915-1.105,4.36-0.45,5.467,1.464L287.589,200.954z" />
<path d="M271.086,211.054c1.267,1.809,0.828,4.304-0.983,5.573l0,0c-1.808,1.267-4.304,0.826-5.569-0.984
L171.613,82.94c-1.267-1.811-0.826-4.306,0.98-5.57l0,0c1.812-1.268,4.305-0.828,5.573,0.982L271.086,211.054z" />
<path d="M255.526,222.554c1.419,1.691,1.199,4.215-0.495,5.637l0,0c-1.689,1.419-4.215,1.198-5.633-0.495
L145.266,103.598c-1.419-1.693-1.198-4.217,0.491-5.635l0,0c1.694-1.421,4.217-1.2,5.638,0.493L255.526,222.554z" />
<path d="M241.027,235.366c1.562,1.561,1.562,4.094-0.001,5.659l0,0c-1.56,1.561-4.095,1.561-5.655-0.002
l-114.553-114.55c-1.561-1.563-1.561-4.097-0.001-5.656l0,0c1.563-1.564,4.096-1.563,5.659,0L241.027,235.366z" />
<path d="M227.7,249.394c1.692,1.419,1.914,3.942,0.493,5.637l0,0c-1.418,1.69-3.943,1.912-5.635,0.491
l-124.1-104.13c-1.691-1.421-1.912-3.945-0.494-5.635l0,0c1.421-1.694,3.943-1.915,5.638-0.494L227.7,249.394z" />
<path d="M215.646,264.529c1.811,1.266,2.251,3.761,0.982,5.573l0,0c-1.265,1.808-3.761,2.249-5.57,0.98
L78.355,178.163c-1.809-1.268-2.248-3.763-0.982-5.57l0,0c1.268-1.812,3.761-2.251,5.572-0.983L215.646,264.529z" />
<path d="M204.958,280.657c1.914,1.104,2.57,3.55,1.464,5.466l0,0c-1.102,1.911-3.55,2.568-5.464,1.462
L60.662,206.586c-1.912-1.106-2.567-3.553-1.464-5.463l0,0c1.104-1.915,3.55-2.57,5.465-1.465L204.958,280.657z" />
<path d="M195.716,297.656c2.003,0.932,2.87,3.312,1.935,5.317l0,0c-0.931,2-3.312,2.867-5.315,1.933L45.514,236.442
c-2.002-0.935-2.867-3.316-1.935-5.315l0,0c0.933-2.004,3.312-2.869,5.316-1.936L195.716,297.656z" />
<path d="M187.99,315.395c2.076,0.754,3.148,3.049,2.391,5.128l0,0c-0.753,2.074-3.05,3.145-5.127,2.389
L33.025,267.506c-2.076-0.757-3.146-3.053-2.391-5.126l0,0c0.754-2.077,3.049-3.147,5.127-2.392L187.99,315.395z" />
<path d="M181.84,333.74c2.135,0.571,3.402,2.764,2.829,4.901l0,0c-0.569,2.131-2.765,3.399-4.899,2.827
L23.291,299.54c-2.134-0.574-3.399-2.768-2.828-4.898l0,0c0.57-2.135,2.763-3.401,4.899-2.83L181.84,333.74z" />
<path d="M177.312,352.551c2.176,0.383,3.63,2.457,3.245,4.636l0,0c-0.381,2.173-2.458,3.627-4.635,3.243
l-159.537-28.13c-2.176-0.386-3.628-2.461-3.244-4.633l0,0c0.382-2.176,2.456-3.629,4.634-3.246L177.312,352.551z" />
<path d="M174.441,371.685c2.201,0.192,3.83,2.132,3.637,4.335l0,0c-0.189,2.198-2.133,3.828-4.334,3.634
L12.362,365.537c-2.201-0.195-3.829-2.136-3.636-4.333l0,0c0.19-2.201,2.131-3.829,4.333-3.638L174.441,371.685z" />
<path d="M173.249,390.997c2.21-0.001,4.001,1.79,4.001,4.002l0,0c0.003,2.206-1.791,3.999-4.001,3.998
l-161.998,0.001c-2.21-0.003-4.001-1.794-4-4l0,0c-0.002-2.209,1.789-4,4-4.001H173.249z" />
<path d="M173.744,410.34c2.202-0.194,4.142,1.434,4.335,3.637l0,0c0.195,2.198-1.436,4.141-3.638,4.332
L13.061,432.43c-2.202,0.189-4.143-1.439-4.334-3.637l0,0c-0.194-2.201,1.434-4.141,3.637-4.334L173.744,410.34z" />
<path d="M175.923,429.564c2.178-0.385,4.251,1.068,4.636,3.246l0,0c0.387,2.173-1.068,4.25-3.246,4.633
L17.776,465.576c-2.177,0.38-4.252-1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0