css实现带剩余时间与上传进度动画的上传文件进度条效果代码-html代码-BFW代码库

css实现带剩余时间与上传进度动画的上传文件进度条效果代码

代码语言：html

所属分类：进度条

代码描述：css实现带剩余时间与上传进度动画的上传文件进度条效果代码

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

<html>

<head>
    <style>
        :root {
          --primary: #5628EE;
          --success: #0EAC70;
          --grey-light: #99A3BA;
          --grey: #6C7486;
          --grey-dark: #3F4656;
          --light: #CDD9ED;
          --lighter: #E4ECFA;
          --lightest: #EEF4FF;
          --pale: #F5F9FF;
          --shadow: rgba(18, 22, 33, .05);
        }
        
        .upload {
          --percent: 0;
          counter-increment: percent var(--percent);
          background: #fff;
          border-radius: 8px;
          width: 320px;
          box-shadow: 0 4px 16px -1px var(--shadow);
          display: flex;
          align-items: center;
          position: relative;
          overflow: hidden;
          padding: 32px 20px;
          font-family: Roboto, Arial;
          -webkit-mask-image: -webkit-radial-gradient(white, black);
        }
        .upload .percent {
          background: var(--pale);
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          transform-origin: 0 50%;
          overflow: hidden;
          transition: background 0.6s ease, transform 0.16s ease;
          transform: scaleX(calc(var(--percent) / 100));
        }
        .upload .percent span {
          display: block;
          position: absolute;
          right: 0;
          width: 100%;
          bottom: 19px;
          height: 2px;
          opacity: 0;
          transform: translateY(0.5px);
          transition: transform 0.8s ease;
        }
        .upload .percent span:before, .upload .percent span:after {
          --r: 0;
          --s: .5;
          content: "";
          position: absolute;
          top: 0;
          height: 2px;
          border-radius: 1px;
          background: var(--primary);
          transition: background 0.8s ease, transform 0.8s ease, height 0.3s ease;
          transform: rotate(var(--r)) scaleY(var(--s));
        }
        .upload .percent span:before {
          right: 0;
          width: 64%;
          transform-origin: 0 50%;
        }
        .upload .percent span:after {
          left: 0;
          width: 38%;
          transform-origin: 100% 50%;
        }
        .upload .percent div {
          --x: 0;
          transform: translateX(var(--x));
          transition: transform 1s ease;
          position: absolute;
          left: 0;
          bottom: 8px;
          width: 300%;
        }
        .upload .percent svg {
          display: block;
          height: 12px;
          width: 100%;
          stroke-width: 1.2px;
          color: var(--primary);
          transition: color 0.5s ease;
        }
        .upload.paused:not(.finished) .percent div {
          --x: -66.66%;
        }
        .upload.paused:not(.finished) .percent div svg {
          color: var(--light);
          -webkit-animation: down 0.8s linear forwards;
                  animation: down 0.8s linear forwards;
        }
        .uplo.........完整代码请登录后点击上方下载按钮下载查看