progress元素的样式自定义演示页面

展示

代码

• HTML：

  <h4>不确定态</h4>
  <progress></progress>
  
  <h4>正常进度</h4>
  <label class="p" for="progress">上传进度：</label>
  <progress id="progress" value="50" max="100"></progress>
  <label for="progress">50</label>%
  <script>
  console.log(progress.labels);
  </script>

• CSS：

  progress {
      --theme-color: deepskyblue;
      --track-color: aliceblue;
  
      width: 160px; height: 14px;
      border: 1px solid var(--theme-color);  
      background-color:var(--track-color);
  }
  /* 不确定态样式 */
  progress:indeterminate {
      background-image: linear-gradient(var(--theme-color), var(--theme-color));
      background-size: 33% 100%;
      background-repeat: no-repeat;
      animation: progressIndeterminate 1s infinite linear alternate;
  }
  :indeterminate::-webkit-progress-bar {
      background-color: transparent;
  }
  :indeterminate::-moz-progress-bar { 
      background: none; 
  }
  
  @keyframes progressIndeterminate {
      0% {
          background-position: 0% 0;
      }
      100% {
          background-position: 100% 0;
      }
  }
  
  /* 确定态样式 */
  ::-moz-progress-bar { 
      background: var(--theme-color); 
  }
  ::-webkit-progress-bar { 
      background: var(--track-color); 
  }
  ::-webkit-progress-value { 
      background: var(--theme-color); 
  }