CSS – 進度條動畫設計
動畫部分建議使用 CSS 的效果會比較優異喔，以下實作範例給大家看。
HTML
|
1 2 3 4 5 6 |
<div class="pbar"> <div class="progress"></div> </div> <button class="add">增加 25%</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 進度條類別 var Pbar = new function (){ this.set = function (val){ if (val > 100) val = 100; $(".pbar").find(".progress").css("width", val + "%"); } this.get = function (){ var parent = $(".pbar"); var target = $(".pbar").find(".progress"); var percent = parseInt( 100 * parseFloat(target.css('width')) / parseFloat( parent.css('width')) ); console.log(percent) return percent; } } |
|
1 2 3 4 5 6 7 8 |
$(function (){ $(".add").on("click", function (){ var val = Pbar.get() + 25; Pbar.set(val); }) }); |
Style
將進度條的寬度設定為 0% ，然後總寬度的 100% 取決於上一層 DIV 的寬度。進度條的 100% 寬度會等於上一層 DIV 寬度的 50%。進度條的進度，交由 JS 賦予。
scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.pbar { width: 50%; height: 5px; background: #E6E5E2; @include border-radius(3px); .progress { $color: #04B2C3; @include background(linear-gradient(to bottom right, lighten($color, 40), $color)); height: inherit; width: 0%; transition: all .5s; @include border-radius(3px); } } |
compile 出來的 css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.pbar { width: 50%; height: 5px; background: #E6E5E2; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .pbar .progress { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2ZjRmZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA0YjJjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #96f4fd), color-stop(100%, #04b2c3)); background: -moz-linear-gradient(top, #96f4fd, #04b2c3); background: -webkit-linear-gradient(top, #96f4fd, #04b2c3); background: linear-gradient(to bottom right, #96f4fd, #04b2c3); height: inherit; width: 0%; transition: all .5s; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } |