HTML 的 progress 標籤，與自訂樣式的方法

progress 是 HTML5 之後提供的一個新的標籤，使用方法就是在上面設定 value 跟 max，就能自動顯示進度條百分比了。

<progress value="67" max="100"></progress>

要自訂樣式的話，要先清掉預設的樣式，才能去調整內容。

progress{
  -webkit-appearance: none;
  appearance: none;
}

接著透過 ::-webkit-progress-bar 與 ::-webkit-progress-value 就能調整樣式

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
    background: linear-gradient(to bottom, red , brown);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}