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