jquery - 进度条进度的边界半径

Question

当bar还没有达到100%的时候，我想保留没有圆 Angular 效果的边缘..我做的是使用if然后改变bar的css，但是它落后了一步..看一看

http://jsfiddle.net/xjkhH/

达到100%还需要再打一次

$('#test').on('click', function (e) {
    $progress_bar = $('#progressbarr');

    //convert to percent
    var progressbar_width;


    progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());

    var i = progressbar_width + 10; // change in percent

    if (i < 101) {


        $progress_bar.find('div').css('width', (i + '%'));

        $progress_bar.find('span').text(i + '%');


    } else {
        $progress_bar.find('div').css('border-top-right-radius', '4px');
        $progress_bar.find('div').css('border-bottom-right-radius', '4px');

    }

});

Answer 1

保持简单这就是您所需要的 (CSS):

overflow:hidden;

为你的#progressbarr :)

DEMO