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

代码语言：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,73.1,10.3L73.1,10.3z M10,80
	c0-9.9,2.1-19.8,6.2-28.8c26.1-8.8,49.4,1.4,62.9,12.5c-0.8,0-1.7,0.1-2.5,0.3C59.7,66,28.4,80.9,19,114.2C13.1,103.8,10,92,10,80
	L10,80z M23.1,120.8c5.4-27,25.9-42.1,42.3-48.2c-0.4,0.7-0.7,1.5-0.9,2.2h0C57.8,90.4,55,125.1,79.2,150
	C56.1,149.7,35.7,138.2,23.1,120.8L23.1,120.8z M86.9,149.6c-20.7-18.2-23.6-43.5-20.6-60.8c0.4,0.7,0.9,1.3,1.5,1.9l0,0
	c8.5,11.3,29.7,27,56,27c5.3,0,10.8-0.7,16.4-2.1C129.1,134.3,109.6,147.4,86.9,149.6L86.9,149.6z"/>
<path d="M150,80c0,13-3.6,25.8-10.5,36.8c-25,3.3-46.5-7.3-59.6-18.4c0,0,0.1,0,0.1,0c1.3,0,2.5-0.1,3.8-0.4
	c17-2,46.7-15.4,61-44.5C148.2,61.9,150,70.9,150,80L150,80z M141.6,46.8C132,70.1,112,83.5,95.8,89.3c0.7-1.1,1.2-2.3,1.6-3.5h0
	c6.7-15.7,10.1-48.2-8-75.2C112,13.7,131.2,27.6,141.6,46.8L141.6,46.8z M80,10c0.7,0,1.4,0,2.1,0.1c15.3,20,17,44,13.8,60.9
	c-0.6-1.1-1.4-2.1-2.2-3.1l0,0C83.5,54.1,57.1,35,24.7,37.1C37.5,20.6,57.5,10,80,10L80,10z M10,80c0-13,3.6-25.8,10.5-36.8
	c25-3.3,46.5,7.3,59.6,18.5c0,0-0.1,0-0.1,0c-1.3,0-2.5,0.1-3.8,0.4c-17,2-46.7,15.4-61,44.5C11.8,98.1,10,89.1,10,80z M18.4,113.2
	C28,89.9,48,76.5,64.2,70.7c-0.7,1.1-1.2,2.3-1.6,3.5h0c-6.7,15.7-10.1,48.2,8,75.2C48,146.3,28.8,132.4,18.4,113.2L18.4,113.2z
	 M80,150c-0.7,0-1.4,0-2.1-0.1c-15.3-20-17-44-13.8-60.9c0.6,1.1,1.4,2.1,2.2,3.1l0,0c9.7,13,34,30.9,64.1,30.9
	c1.6,0,3.3-0.1,4.9-0.2C122.5,139.4,102.5,150,80,150L80,150z"/>
<path d="M150,80c0,16.4-5.7,31.5-15.1,43.4c-23.6-0.8-43.6-11.7-56.2-22.8c0.4,0,0.9,0.1,1.3,0.1c1.5,0,2.9-0.2,4.3-0.4
	c17-2,45.3-14.1,63.1-39.4C149.1,67.1,150,73.5,150,80L150,80z M145,54.1c-12.5,20-31.9,31.9-47.8,37.3c1-1.5,1.8-3.2,2.4-5l0,0
	c6.8-15.8,10.5-46.3-2.6-74.4C119,17.6,136.8,33.5,145,54.1L145,54.1z M80,10c3.4,0,6.8,0.3,10.1,0.7c11.1,20.8,11.7,43.6,8.4,60.1
	c-0.8-1.7-1.9-3.2-3.1-4.6l0,0C85.2,52.5,60.6,34,29.8,31.3C42.5,18.2,60.3,10,80,10L80,10z M10,80c0-16.4,5.7-31.5,15.1-43.4
	c23.6,0.8,43.6,11.7,56.2,22.8c-0.4,0-0.9-0.1-1.3-0.1c-1.4,0-2.9,0.2-4.3,0.4c-17,2-45.3,14.1-63.1,39.4C10.9,92.9,10,86.5,10,80
	L10,80z M15,105.9c12.5-20,31.9-31.9,47.8-37.3c-1,1.5-1.8,3.2-2.4,5l0,0c-6.8,15.8-10.5,46.3,2.6,74.4
	C41,142.4,23.2,126.5,15,105.9L15,105.9z M80,150c-3.4,0-6.8-0.3-10.1-0.7c-11.1-20.8-11.7-43.6-8.4-60.1c0.8,1.7,1.9,3.2,3.1,4.6
	l0,0c10.3,13.7,34.8,32.2,65.7,35C117.5,141.8,99.7,150,80,150z"/>
<path d="M150,80c0,19-7.6,36.3-20,49c-22-3.8-40.5-14.8-52.7-25.8c0.9,0.1,1.8,0.2,2.7,0.2c1.7,0,3.3-0.2,4.8-0.5
	c17.1-2,44-12.8,64.1-35C149.7,71.9,150,75.9,150,80L150,80z M147.4,61.2C133.1,78.4,114.3,88.9,98.7,94c1.5-2,2.7-4.3,3.5-6.7l0,0
	c6.8-15.8,10.9-44.6,1.8-73.1C125.2,22,141.3,39.5,147.4,61.2L147.4,61.2z M80,10c6,0,11.8,0.8,17.4,2.2c7.7,21,7.5,42.5,4.1,58.6
	c-1-2.3-2.4-4.4-4.1-6.3l0,0C87.2,50.7,64.3,32.7,35.1,26.3C47.3,16.1,62.9,10,80,10z M10,80c0-19,7.7-36.3,20-49
	c22,3.8,40.5,14.8,52.7,25.8c-0.9-0.1-1.8-0.2-2.7-0.2c-1.6,0-3.2,0.2-4.8,0.5c-17.1,2-44,12.8-64.1,35C10.3,88.1,10,84.1,10,80
	L10,80z M12.6,98.8C26.9,81.6,45.7,71.1,61.3,66c-1.5,2-2.7,4.2-3.5,6.7l0,0C51,88.5,46.9,117.3,56,145.8
	C35,138.1,18.7,120.6,12.6,98.8z M80,150c-6,0-11.8-0.8-17.4-2.2c-7.7-21-7.5-42.5-4.1-58.6c1,2.3,2.4,4.4,4.1,6.3l0,0
	c10.3,13.8,33.1,31.7,62.3,38.1C112.7,143.9,97.1,150,80,150L80,150z"/>
<path d="M150,80c0,21.6-9.8,40.9-25.2,53.8c-20.4-6-37.5-16.9-49.2-27.7c1.4,0.2,2.9,0.4,4.4,0.4c1.9,0,3.7-0.2,5.5-0.6
	c17.1-2,42.7-11.7,64.3-31C149.9,76.6,150,78.3,150,80z M149,68.1c-15.4,14.7-33.4,24-48.6,28.8c2.1-2.6,3.7-5.5,4.8-8.6l0,0
	c6.8-15.8,11.3-42.9,5.3-71.3C130.4,26.7,145.1,45.6,149,68.1L149,68.1z M80,10c8.2,0,16.4,1.4,24.2,4.3c5.1,20.7,4.1,41,0.6,56.5
	c-1.2-3.1-2.9-6-5.1-8.4l0,0c-10.3-13.8-31.5-31.2-59-40.2C52.3,14.2,66,10,80,10L80,10z M10,80c0-21.6,9.8-40.9,25.2-53.8
	c20.4,6,37.5,16.9,49.2,27.7c-1.4-0.2-2.9-0.4-4.4-0.4c-1.9,0-3.7,0.2-5.5,0.6c-17.1,2-42.8,11.7-64.3,31C10.1,83.4,10,81.7,10,80
	L10,80z M11,91.9c15.4-14.7,33.4-24,48.6-28.8c-2.1,2.5-3.7,5.5-4.8,8.6l0,0c-6.8,15.8-11.2,42.9-5.3,71.3
	C29.6,133.3,14.9,114.4,11,91.9z M80,150c-8.2,0-16.4-1.4-24.2-4.3c-5.1-20.7-4.1-41-0.6-56.5c1.2,3.1,2.9,6,5.1,8.4l0,0
	c10.3,13.8,31.5,31.2,59.1,40.2C107.8,145.8,94,150,80,150z"/>
<path d="M119.1,138c-18.7-7.4-34.4-18.2-45.6-28.7c2.1,0.5,4.3,0.7,6.4,0.7c2.1,0,4.2-0.2,6.2-0.7
	c17-2,41.4-10.6,63.8-27.3C149.2,105.3,137.2,125.8,119.1,138z M149.8,75.1c-15.8,12.5-33,20.7-47.7,25.1c2.9-3.1,5.1-6.9,6.4-10.9
	l0,0c6.7-15.7,11.5-41.2,8.2-68.9C135.3,32,148.2,52,149.8,75.1z M79.9,10c10.6,0,21.1,2.4,30.7,7.1c2.9,19.9,1.5,38.9-2.1,53.8
	c-1.3-4.1-3..........完整代码请登录后点击上方下载按钮下载查看