js实现水流注满圆圆容器loading加载动画效果代码-html代码-BFW代码库

js实现水流注满圆圆容器loading加载动画效果代码

代码语言：html

代码描述：js实现水流注满圆圆容器loading加载动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      display: grid;
      place-items: center;
      height: 100vh;
      margin: 0;
      background: #0f0514;
      font-family: monospace;
    }
    
    .loader {
      font-size: 25vmin;
      width: 1em;
      height: 1em;
      background-color: #21346e;
      border-radius: 1em;
      position: relative;
    }
    .loader::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 0.1rem solid #21346e;
      border-radius: inherit;
    }
    .loader.loaded::after {
      opacity: 0;
      border-color: #3d7af5;
      transform: scale(1.6);
      transition: opacity 0.6s ease, transform 0.6s ease-out;
    }
    .loader .meter {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      overflow: hidden;
    }
    .loader .meter .fill .........完整代码请登录后点击上方下载按钮下载查看