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,.........完整代码请登录后点击上方下载按钮下载查看