开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Bootstrap Progressbar首页、文档和下载 - jQuery 的进度条插件 - 开源中国社区
全部项目分类
我要评价
MIT
Ruby JavaScript
跨平台
分享
收藏
5 人收藏
收录时间:2015-05-12
Bootstrap Progressbar 详细介绍

Bootstrap Progressbar 是一个 jQuery 插件,扩展基本引导进度。它通过添加 Javascript 中预先存在的 CSS 转换提供了动态进度条。此外,你可以在动态进度条中通过回调显示当前进度信息。

Bootstrap Progressbar

代码示例

default values

Progressbar.defaults = {
    transition_delay: 300,
    refresh_speed: 50,
    display_text: 'none',
    use_percentage: true,    percent_format: function(percent) { return percent + '%'; },    amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; },
    update: $.noop,
    done: $.noop,
    fail: $.noop
};

transition_delay

$(document).ready(function() {
    $('.progress .progress-bar').progressbar({
        transition_delay: 1500
    });
});

animation

  1. horizontal

    • less

      .progress .bar {
          .transition(width 2s ease-in-out);
      }
    • scss

      .progress.vertical .progress-bar {
          @include transition(width 2s ease-in-out);
      }
    • css

      .progress .bar {
          -webkit-transition: width 2s ease-in-out;
          -moz-transition: width 2s ease-in-out;
          -ms-transition: width 2s ease-in-out;
          -o-transition: width 2s ease-in-out;
          transition: width 2s ease-in-out;
      }
  2. vertical

    • less

      .progress.vertical .bar {
          .transition(height 2s ease-in-out);
      }
    • scss

      .progress.vertical .bar {
          @include transition(height 2s ease-in-out);
      }
    • css

      .progress.vertical .bar {
          -webkit-transition: height 2s ease-in-out;
          -moz-transition: height 2s ease-in-out;
          -ms-transition: height 2s ease-in-out;
          -o-transition: height 2s ease-in-out;
          transition: height 2s ease-in-out;
      }



大家对 Bootstrap Progressbar 的评论 (全部 0 条评论)
{{repayCom.userName}}
Bootstrap Progressbar 相关博客
顶部