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.073-4.635-3.246l0,0c-0.385-2.176,1.067-4.25,3.245-4.635L175.923,429.564z" />
<path d="M179.77,448.526c2.136-0.572,4.328,0.694,4.9,2.831l0,0c0.575,2.13-0.693,4.326-2.83,4.897L25.363,498.186
c-2.135,0.568-4.329-0.699-4.9-2.83l0,0c-0.572-2.135,0.693-4.328,2.829-4.9L179.77,448.526z" />
<path d="M185.254,467.081c2.078-0.755,4.372,0.315,5.129,2.394l0,0c0.759,2.072-0.313,4.371-2.393,5.125
L35.764,530.01c-2.077,0.752-4.374-0.32-5.129-2.393l0,0c-0.756-2.078,0.313-4.373,2.392-5.129L185.254,467.081z" />
<path d="M192.335,485.088c2.004-0.934,4.383-0.066,5.318,1.938l0,0c0.937,1.998,0.068,4.381-1.938,5.314
L48.898,560.806c-2.004,0.931-4.386,0.062-5.318-1.937l0,0c-0.935-2.004-0.069-4.384,1.936-5.318L192.335,485.088z" />
<path d="M200.958,502.408c1.915-1.104,4.36-0.447,5.467,1.467l0,0c1.107,1.91,0.45,4.357-1.467,5.463L64.667,590.34
c-1.915,1.102-4.364,0.443-5.467-1.467l0,0c-1.106-1.914-0.451-4.359,1.465-5.467L200.958,502.408z" />
<path d="M211.058,518.911c1.812-1.266,4.305-0.825,5.574,0.985l0,0c1.27,1.806,0.828,4.302-0.985,5.569
L82.949,618.387c-1.812,1.266-4.309,0.822-5.573-0.984l0,0c-1.27-1.811-0.83-4.303,0.982-5.574L211.058,518.911z" />
<path d="M222.558,534.471c1.694-1.418,4.216-1.197,5.639,0.496l0,0c1.422,1.688,1.2,4.214-0.496,5.635
L103.606,644.734c-1.694,1.418-4.221,1.193-5.638-0.496l0,0c-1.423-1.693-1.202-4.213,0.493-5.639L222.558,534.471z" />
<path d="M235.37,548.97c1.564-1.561,4.095-1.561,5.66,0.003l0,0c1.563,1.557,1.563,4.093-0.003,5.656
L126.481,669.182c-1.564,1.559-4.101,1.556-5.659-0.004l0,0c-1.565-1.562-1.565-4.092,0-5.66L235.37,548.97z" />
<path d="M249.397,562.297c1.423-1.691,3.942-1.912,5.639-0.49l0,0c1.693,1.414,1.914,3.94,0.49,5.635L151.4,691.541
c-1.423,1.689-3.949,1.908-5.638,0.49l0,0c-1.696-1.42-1.917-3.939-0.494-5.639L249.397,562.297z" />
<path d="M264.533,574.351c1.27-1.809,3.761-2.248,5.574-0.979l0,0c1.811,1.262,2.25,3.758,0.979,5.57
l-92.914,132.701c-1.27,1.809-3.768,2.246-5.573,0.981l0,0c-1.813-1.267-2.253-3.758-0.984-5.574L264.533,574.351z" />
<path d="M280.661,585.039c1.107-1.912,3.551-2.566,5.468-1.461l0,0c1.914,1.099,2.569,3.547,1.462,5.463
l-80.995,140.295c-1.107,1.912-3.558,2.564-5.467,1.463l0,0c-1.917-1.104-2.571-3.547-1.466-5.467L280.661,585.039z" />
<path d="M297.659,594.281c0.937-2.002,3.313-2.867,5.319-1.932l0,0c2.004,0.928,2.869,3.309,1.934,5.314
l-68.46,146.82c-0.937,2.002-3.32,2.865-5.318,1.934l0,0c-2.006-0.932-2.87-3.31-1.937-5.318L297.659,594.281z" />
<path d="M315.398,602.006c0.759-2.075,3.051-3.144,5.131-2.387l0,0c2.077,0.749,3.146,3.045,2.39,5.125
l-55.403,152.229c-0.759,2.076-3.059,3.145-5.13,2.391l0,0c-2.079-0.754-3.147-3.047-2.393-5.131L315.398,602.006z" />
<path d="M333.743,608.156c0.575-2.135,2.766-3.397,4.903-2.824l0,0c2.135,0.564,3.4,2.758,2.828,4.896
l-41.926,156.479c-0.575,2.133-2.772,3.398-4.902,2.828l0,0c-2.136-0.57-3.4-2.762-2.83-4.903L333.743,608.156z" />
<path d="M352.555,612.684c0.387-2.176,2.459-3.625,4.639-3.24l0,0c2.176,0.376,3.628,2.451,3.244,4.631
l-28.129,159.538c-0.387,2.175-2.466,3.626-4.637,3.245l0,0c-2.178-0.383-3.628-2.456-3.247-4.639L352.555,612.684z" />
<path d="M371.689,615.555c0.195-2.201,2.134-3.825,4.338-3.633l0,0c2.2,0.186,3.828,2.127,3.636,4.33
l-14.117,161.384c-0.195,2.2-2.141,3.827-4.336,3.637l0,0c-2.203-0.19-3.829-2.13-3.64-4.338L371.689,615.555z" />
<path d="M391.001,616.748c0.003-2.211,1.792-3.998,4.005-3.998l0,0c2.208-0.007,3.999,1.785,4,3.997l0.002,162
c-0.004,2.208-1.8,3.999-4.003,4.001l0,0c-2.211,0.002-4-1.789-4.004-4.004V616.748z" />
<path d="M410.343,616.253c-0.189-2.202,1.437-4.139,3.642-4.331l0,0c2.199-0.199,4.14,1.43,4.333,3.633
l14.121,161.383c0.188,2.2-1.444,4.141-3.639,4.334l0,0c-2.202,0.195-4.141-1.434-4.338-3.639L410.343,616.253z" />
<path d="M429.568,614.074c-0.381-2.178,1.07-4.248,3.25-4.632l0,0c2.174-0.39,4.249,1.063,4.633,3.241
l28.133,159.538c0.38,2.175-1.077,4.251-3.247,4.634l0,0c-2.176,0.387-4.249-1.067-4.639-3.246L429.568,614.074z" />
<path d="M448.53,610.228c-0.568-2.136,0.696-4.325,2.835-4.897l0,0c2.131-0.577,4.325,0.689,4.897,2.826
l41.93,156.479c0.568,2.133-0.702,4.329-2.83,4.898l0,0c-2.134,0.576-4.326-0.693-4.904-2.828L448.53,610.228z" />
<path d="M467.085,604.742c-0.752-2.076,0.317-4.369,2.397-5.125l0,0c2.072-0.76,4.369,0.311,5.125,2.389
l55.408,152.229c0.753,2.074-0.321,4.374-2.393,5.127l0,0c-2.075,0.76-4.369-0.314-5.132-2.391L467.085,604.742z" />
<path d="M485.091,597.662c-0.93-2.003-0.064-4.381,1.942-5.314l0,0c1.998-0.938,4.38-0.072,5.313,1.932
l68.465,146.82c0.931,2.001,0.062,4.386-1.937,5.316l0,0c-2.002,0.938-4.38,0.067-5.321-1.934L485.091,597.662z" />
<path d="M502.411,589.039c-1.1-1.914-0.446-4.359,1.472-5.463l0,0c1.91-1.108,4.357-0.455,5.463,1.46l81,140.295
c1.102,1.913,0.443,4.364-1.467,5.466l0,0c-1.912,1.107-4.356,0.447-5.469-1.463L502.411,589.039z" />
<path d="M518.914,578.939c-1.262-1.812-0.824-4.304,0.99-5.57l0,0c1.806-1.271,4.302-0.834,5.569,0.979
l92.92,132.701c1.264,1.809,0.821,4.309-0.985,5.573l0,0c-1.809,1.269-4.301,0.825-5.575-0.981L518.914,578.939z" />
<path d="M534.475,567.439c-1.415-1.695-1.197-4.215,0.5-5.635l0,0c1.688-1.424,4.214-1.206,5.635,0.488
l104.132,124.099c1.416,1.691,1.192,4.22-0.497,5.638l0,0c-1.69,1.421-4.212,1.197-5.639-0.492L534.475,567.439z" />
<path d="M548.974,554.627c-1.558-1.564-1.561-4.094,0.007-5.656l0,0c1.558-1.565,4.093-1.568,5.656-0.005
l114.551,114.552c1.558,1.561,1.556,4.099-0.004,5.658l0,0c-1.561,1.562-4.092,1.561-5.659,0.002L548.974,554.627z" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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