gsap+svg实现光圈闭合加载进度条动画效果代码-html代码-BFW代码库

gsap+svg实现光圈闭合加载进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：gsap+svg实现光圈闭合加载进度条动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          font-family: "proxima-nova", sans-serif;
          padding: 0;
          margin: 0;
          display: flex;
          min-height: 100vh;
          background: #262626;
          overflow: hidden;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        /*   font-variant-numeric: tabular-nums; */
          color: white;
        }
        
        
        svg {
          width: 200px;
          height: 200px;
        }
        
        path {
          opacity: 0;
          fill: #fff;
        }
    </style>




</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">

<path d="M147.3,99.1c-26.9,16-51.9,6.4-65.7-4.7c0.5-0.1,0.9-0.1,1.4-0.1c16.8-2,49.8-18.5,52.7-56.7
	c9,11.8,14.4,26.5,14.4,42.4C150,86.5,149.1,92.9,147.3,99.1z M130.2,31.3c0.4,31.2-20.3,48-36.9,54.5c0.2-0.4,0.3-0.8,0.4-1.1
	l0.1,0c6.7-15.5,9-52.5-22.7-74.1C74,10.2,77,10,80,10C99.7,10,117.5,18.2,130.2,31.3z M62.9,12.1c27.3,15.3,31.5,41.7,28.8,59.3
	c-0.2-0.3-0.5-0.6-0.8-1l0,0C80.8,56.8,50,36.3,15.4,53C23.8,32.9,41.4,17.5,62.9,12.1L62.9,12.1z M12.7,60.9
	c26.9-16,51.9-6.4,65.7,4.7c-0.5,0-0.9,0.1-1.4,0.1c-16.8,2-49.8,18.5-52.7,56.7C15.3,110.6,10,95.9,10,80
	C10,73.4,10.9,67,12.7,60.9z M29.8,128.7c-0.4-31.2,20.3-48,36.9-54.5c-0.2,0.4-0.3,0.8-0.4,1.1l-0.1,0c-6.7,15.5-9,52.5,22.7,74.1
	C86,149.8,83,150,80,150C60.3,150,42.5,141.8,29.8,128.7L29.8,128.7z M97.1,147.9c-27.3-15.3-31.5-41.7-28.8-59.3
	c0.2,0.3,0.5,0.6,0.8,1l0,0c7.4,9.9,26,23.6,49,23.6c8.4,0,17.3-1.9,26.5-6.3C136.2,127.1,118.6,142.5,97.1,147.9z"/>
<path  d="M150,80c0,9.9-2.1,19.8-6.2,28.8c-26.1,8.9-49.4-1.4-62.9-12.5c0.8,0,1.7-0.1,2.5-0.3
	c16.9-2,48.2-16.9,57.7-50.2C146.9,56.2,150,68,150,80L150,80z M136.8,39.2c-5.4,27-25.9,42.1-42.3,48.2c0.4-0.7,0.7-1.5,0.9-2.2
	l0,0c6.7-15.6,9.6-50.3-14.7-75.2C103.9,10.3,124.3,21.7,136.8,39.2L136.8,39.2z M73.1,10.3c20.7,18.2,23.6,43.5,20.6,60.8
	c-0.4-0.7-0.9-1.3-1.5-1.9l0,0C82.1,55.5,53.5,35.8,19.8,44.3C30.9,25.6,50.4,12.6.........完整代码请登录后点击上方下载按钮下载查看