css+svg实现无限循环loading加载动画效果代码-html代码-BFW代码库

css+svg实现无限循环loading加载动画效果代码

代码语言：html

代码描述：css+svg实现无限循环loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  
  
  
<style>
body{
	background:#112;
}
svg{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:200px;
	width: 200px;
/* 	border:2px solid red; */
}
</style>


  
  
</head>

<body >
  <svg viewBox="0 0 100 100">
	<filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
		<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
	</filter>
	<path id="figure8" fill="none" stroke="none" d="M 20 50 A 1 1 0 0 0 50 50 A 1 1 0 0 1 80 50 A 1 1 0 0 1 50 50 A 1 1 0 0 0 20 50" />

	<use href="#worm" filter="url(#blur)" />
	<g id="worm">
	<g opacity="0">
		<g id="c1" fill="none">
			<circle r="8" id="circle" />
			<animateMotion dur="5s" repeatCount="indefinite">
				<mpath href="#figure8" />
			</animateMotion>
		</g>
	</g>
	<use href="#circle" fill="rgba(155,255,255,0.1)">
		<animateMotion dur="5s" repeatCount="indefinite" begin="-.1s">
			<mpath href="#figure8" />
		</animateMotion>
	</use>
	<use href="#circle" fill="rgba(155,255,255,0.2)">
		<animateMotion dur="5s" repeatCount="indefinite" begin="-.2s">
			<mpath href="#figure8" />
		</animateMotion>
	</use>
	<use href="#circle" fill="rgba(155,255,255,0.3)">
		<animateMotion dur="5s" repeatCount="indefinite" begin="-.3s">
			<mpath href="#figure8" />.........完整代码请登录后点击上方下载按钮下载查看