css实现单个div波浪loading加载动画效果代码-html代码-BFW代码库

css实现单个div波浪loading加载动画效果代码

代码语言：html

代码描述：css实现单个div波浪loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .loader {
          --s: 40px; /* control the size */
          --b: 18px; /* control the border thickness */
        
          width: calc(8*var(--s));
          aspect-ratio: 4;
          display: grid;
          
        }
        .loader::before,
        .loader::after {
          content: "";
          grid-area: 1/1;
          background: 
            linear-gradient(#BD1550 50%,#E97F02 0) no-repeat,
            linear-gradient(#F8CA00 50%,#8A9B0F 0) no-repeat;
          background-size: 50% 200%;
          --_g: calc(-.45*var(--s)), #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
          --_s: calc(4*var(--s)) var(--s) repeat-x;
          --_r: calc(1.096*var(--s) + var(--b)/2);
          -webkit-mask:
            radial-gradient(var(--_r) at left 50% bottom var(--_g)) 
              calc(50% - 2*var(--s)) calc(50% - var(--s)/2)/var(--_s),
            radial-gradient.........完整代码请登录后点击上方下载按钮下载查看