CSS Conic Gradients

CSS Conic Gradients支援度:Can I Use)

如標題直接用conic-gradient製作圓形進度試試吧~

1. 先用conic-grdient製作出圓形底:
2. 接著蓋上一層與背景相同的overlay，圓形進度條形狀就產生了:
3. 最後再將conic-grdient的紅色佔的百分比，調整成css變成，由controller控制就完成啦!

.circle{
  width:300px;
  height:300px;
  border-radius:50%;
  background: conic-gradient(red calc(var(--percentage) * 1%), #ecf0f1 calc(var(--percentage) * 1%));
  display:flex;
  justify-content:center;
  align-items:center;
  .overlay{
    width:80%;
    height:80%;
    background:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    font-weight:900;
  }
}

codepen範例

IT15-Day26-Create a circular progress bar with CSS! - CSS Conic Gradients

參考來源

• https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient?fbclid=IwAR04YiIAmB-1z-D8r_9o_Z34hJ0zUcFVq6JLnRC8nfGtbz7oG5N5tldJpVw
• https://www.joshmorony.com/create-a-circle-progress-web-component-with-conic-gradients-in-stencil-js/