CSS – 進度條動畫設計

動畫部分建議使用 CSS 的效果會比較優異喔,以下實作範例給大家看。

HTML

jQuery

Style

將進度條的寬度設定為 0% ,然後總寬度的 100% 取決於上一層 DIV 的寬度。進度條的 100% 寬度會等於上一層 DIV 寬度的 50%。進度條的進度,交由 JS 賦予。

scss

compile 出來的 css

 

 

 

發表迴響