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