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