jQuery 的进度条插件 Bootstrap Progressbar

MIT
Ruby JavaScript
跨平台
2015-05-12
大胖森

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;
      }


加载中

评论(0)

暂无评论

暂无资讯

暂无问答

jQuery 的进度条插件 Bootstrap Progressbar

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

2016/11/23 16:54
521
1
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

http://www.open-open.com/news/view/c0ed8a#_label0

2015/08/17 11:17
3.4K
2
bootstrap 进度条模拟温度计

最近需要做一个类似温度计的图表,网上找了好久,也没有找到合适的,现根据bootstrap的进度条来模拟温度计,主要实现根据不同区间的数据来显示不同的颜色,并自适应屏幕大小,在网上找到一个背...

2016/09/13 10:00
56
0
ProgressBar

ProgressBar用于在界面上显示一个进度条。 <ProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility=...

2018/07/19 15:33
2
0
juery ui 进度条

juery ui 进度条

2014/08/20 22:41
162
0
android progressbar

=================================================================== Android 在Java代码中设置style属性--使用代码创建ProgressBar对象 在andriod开发中,很大一部分都要与资源打交道,比...

2014/10/04 11:48
44
0
Android 在Java代码中设置style属性--使用代码创建ProgressBar对象

在andriod开发中,很大一部分都要与资源打交道,比如说:图片,布局文件,字符串,样式等等。这给我们想要开发一些公共的组件带来很大的困难,因为公共的组件可能更愿意以jar包的形式出现。但...

2012/06/11 14:56
209
0
自定义之progressbar(图片实现)

自定义Progressbar: 1.自选一张图片 2.在drawable下创建一个rotate相关xml文件 3.自定义一个Style , 在控件Progressbar上引入自定义的style , 指定转动速度 在drawable文件下的 rotate_pro...

2015/09/25 11:33
1K
0
Android 两种自定义ProgressBar

横向的ProgressBar 在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com...

2015/05/05 11:13
1K
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部