css实现10种加载进度条动画效果代码-html代码-BFW代码库

css实现10种加载进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：css实现10种加载进度条动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        .progress-1 {
          width:120px;
          height:20px;
          background:
           linear-gradient(#000 0 0) 0/0% no-repeat
           #ddd;
          animation:p1 2s infinite linear;
        }
        @keyframes p1 {
            100% {background-size:100%}
        }
        
        .progress-2 {
          width:120px;
          height:20px;
          border-radius: 20px;
          background:
           linear-gradient(orange 0 0) 0/0% no-repeat
           lightblue;
          animation:p2 2s infinite steps(10);
        }
        @keyframes p2 {
            100% {background-size:110%}
        }
        
        .progress-3 {
          width:120px;
          height:20px;
          border-radius: 20px;
          background:
           repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0%   no-repeat,
           repeating-linear-gradient(135deg,#ddd    0 10px,#eee    0 20px) 0/100%;
          animation:p3 2s infinite;
        }
        @keyframes p3 {
            100% {background-size:100%}
        }
        
        .progress-4 {
          width:120px;
          height:20px;
          -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
          background:
           linear-gradient(#000 0 0) 0/0% no-repeat
           #ddd;
          animation:p4 2s infinite steps(6);
        }
        @keyframes p4 {
            100% {background-size:120%}
        }
        
        .progress-5 {
          width:80px;
          height:40px;
          border:2px solid currentColor;
          border-right-color: transparent;
          padding:3px;
          background: 
            repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) 
            0/0% no-repeat content-box content-box;
          position: relative;
          animation:p4 2s infinite steps(6);
        }
        .progress-5::before {
          content:"";
          position: absolute;
          top:-2px;
          bottom:-2px;
          left:100%;
          width:10px;
          background:
            linear-gradient(
                #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
                #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
            linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
            linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
          background-repeat:no-repeat;
        }
        @keyframes p5 {
            100% {background-size:120%}
        }
        
        .progress-6 {
          width:120px;
          height:22px;
          border-radius: 20px;
          color:#514b82;
          border:2px solid;
          position: relative;
        }
        .progress-6::before {
          content:"";
          position: absolute;
          margin:2px;
          inset:0 100% 0 0;
          border-radius: inherit;
          background:currentColor;
          animation:p6 2s infinite;
        }
        @keyframes p6 {
            100% {inset:0}
        }
        
        .progre.........完整代码请登录后点击上方下载按钮下载查看