svg+css实现咖啡loading加载描边动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:svg+css实现咖啡loading加载描边动画效果代码

代码标签: svg css 咖啡 loading 加载 描边 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body, html {
  height: 100%;
}

body {
  display: grid;
  align-items: center;
  justify-items: center;
}
</style>

  
  
</head>

<body>
  <svg width="54" height="85" viewBox="0 0 54 85" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M41.0443 76.0102C43.3173 76.0102 52.4083 73.5952 52.4083 61.5212V41.4492H16.0253V61.5212C16.0253 73.5952 25.1173 76.0102 27.3903 76.0102H41.0443Z" stroke="#005AA0" stroke-width="2">
	</path>
	<path d="M16.0263 51.4363C14.6063 46.3223 8.8883 45.4993 5.3733 46.6062C0.9693 47.9912 0.4013 56.2234 5.3733 58.7302C10.3443 61.2373 13.1853 64.3623 11.6233 67.7712" stroke="#005AA0" stroke-width="2" />
	<path 
		  d="M35.1553 36.1421C35.1553 33.262 33.6873 30.2471 32.0443 27.7141C30.4033 25.1812 28.5263 21.1802 34.6193 15.8401C39.7313 11.3611 38.7513 5.67315 35.1553 3.77305C30.7283 1.43515 26.0713 3.87315 26.4993 7.54205C26.9643 11.5201 32.2583 11.3401 33.0393 8.71125" 
		  stroke="#E30613.........完整代码请登录后点击上方下载按钮下载查看

网友评论0