1010cc时时彩标准版 > 操作系统 > jQuery完成的动态进程条功用示例,使用Bootstrap营

原标题:jQuery完成的动态进程条功用示例,使用Bootstrap营

浏览次数:71 时间:2019-08-11

自定义的进程条,自定义进程条

1010cc时时彩标准版 1

/** 初始化一个progress,
 aFrame                    外层的大小
 aFrameColor         外层的颜色
 aBarColor               里层的颜色
 gapSize                   里层和外层的间隙
 **/

- (id)initWithFrame:(CGRect)aFrame frameColor:(UIColor *)aFrameColor barColor:(UIColor *)aBarColor aFrameCornerRadius:(CGFloat)aFrameCornerRadius aFrameBorderColor:(CGColorRef)aFrameBorderColor gapSize:(CGFloat)gapSize
{
    self = [super initWithFrame:aFrame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        _gap = gapSize;

        _outter = [[UILabel alloc]init];
        _outter.frame = self.bounds;
        _outter.backgroundColor = aFrameColor;
        _outter.layer.borderWidth = 1;
        _outter.layer.borderColor = aFrameBorderColor;
        [self addSubview:_outter];

        _inner = [[UILabel alloc]init];
        _inner.frame = CGRectZero;
        _inner.backgroundColor = aBarColor;
        [self addSubview:_inner];

        _inner.layer.cornerRadius = aFrameCornerRadius - gapSize;
        _inner.layer.masksToBounds = YES;
        _outter.layer.cornerRadius = aFrameCornerRadius;
        _outter.layer.masksToBounds = YES;
    }
    return self;
}


- (void)setProgress:(float)progress
{
    progress = progress<0?0:progress;
    progress = progress>1?1:progress;
    _inner.frame = CGRectMake(_gap, _gap, progress*(self.frame.size.width - _gap*2.0), self.frame.size.height - _gap *2.0);
}

- (void)dealloc
{
    [_inner removeFromSuperview];
    [_outter removeFromSuperview];
}

 

/* * 初阶化二个progress, aFrame 外层的轻重缓急 aFrameColor 外层的颜料 aBarColor 里层的颜料 gapSize 里层和外围的间隙...

利用Bootstrap营造特色进程条效果,bootstrap进程条

Bootstrap基本过程条达成

1.外层容器使用class=progress类样式

2.真的突显进程条样式的容器使用class=progress-bar类样式

示例:

<div class="progress">
 <div class="progress-bar"></div>
 <!--可以添加width来设置进度条当前加载的百分比-->
 <div class="progress-bar" style="width: 10%;"></div>
 <!--可以指定文本值来显示当前进度条的信息-->
 <div class="progress-bar" style="width: 10%;">10%</div>
 <!--如果当前进度条进度为0,又想让进度条底层显示一点,可以指定min-width-->
 <div class="progress-bar" style="width: 0;min-width: 2px"></div>
</div>

效果图

1010cc时时彩标准版 2

姹紫嫣红进程条

水彩进程条类样式增多在里层容器中,和progress-bar增添在同贰个器皿中

1.progress-bar:暗中认可核心色,士林蓝色

2.progress-bar-success:成功进程条,金红

2.progress-bar-info:音信进程条,灰黄

3.progress-bar-warning:警告进程条,银灰

4.progress-bar-danger:错误进度条,中绿

效果图

1010cc时时彩标准版 3

条纹进程条

条纹进程条类样式为:class="progress-striped",增添在外层容器中,也正是和progress增多在同步
progress-striped

效果图

1010cc时时彩标准版 4

自定义开荒模拟加载进度条(bootstrap jquery)

<div class="progress progress-striped">
 <div class="progress-bar" id="probar" style="width: 0%">0%</div>
</div>
<script>
 var sum = 0;
 $.fn.addprofun = function(){
  var add = Math.floor(Math.random()*10);
  sum  = add;
  if(sum > 100)
   sum = 100;
  $("#probar").css("width",num "%");
  $("#probar").text(num "%");
  if(sum == 100){
   clearInterval(addpro);
   //这里设置800延迟是因为进度条加载到100需要时间,如果不进行延迟会出现:已经显示加载完成,而进度条还没有加载完毕
   window.setTimeout(function(){$("#probar").text("加载完成");},800);
  }
 };
 var addpro = window.setInterval($.fn.addprofun,100);
</script>

好了,内容到此结束,希望对大家有着补助!

Bootstrap基本进程条达成 1.外层容器使用class=progress类样式 2.当真显示进度条样式的容器使用...

Bootstrap基本进度条完成

进程条效果做为网址常用模块无论是投资理财类、依旧众筹类、加载提醒类网址已经比较广泛。别的,HTML5增产了progress标签,其首要程度一叶落而知天下秋。
由于HTML的progress1010cc时时彩标准版,存在包容性难题,本文首要教师怎样通过CSS实现贰个简约的自定义进程条效果!
前端开荒常用的进程条效果如下:

本文实例陈述了bootstrap jQuery达成的动态进度条作用。共享给大家供大家参谋,具体如下:

1.外层容器使用class=progress类样式

1010cc时时彩标准版 5

此款进程条实现的效应:

2.当真展现进程条样式的器皿使用class=progress-bar类样式

进度条效果 1.jpg

1.行使了bootstrap的进程条组件。

示例:

1010cc时时彩标准版 6

a.在最外层的<div>中加入class .progress,在里层<div>参预class .progress-bar进而完毕宗旨的进程条。
b.在外层<div>中步入class .progress-striped实现条纹进程条。
c.在内层<div>参预class .progress-bar-danger/warning/info/success 进而达成革命、蛋青、浅绿、石榴红
d.在外层<div>中参预class .active 完成动画效果

<div class="progress">
 <div class="progress-bar"></div>
 <!--可以添加width来设置进度条当前加载的百分比-->
 <div class="progress-bar" style="width: 10%;"></div>
 <!--可以指定文本值来显示当前进度条的信息-->
 <div class="progress-bar" style="width: 10%;">10%</div>
 <!--如果当前进度条进度为0,又想让进度条底层显示一点,可以指定min-width-->
 <div class="progress-bar" style="width: 0;min-width: 2px"></div>
</div>

进程条效果 2.jpg

2.选拔jQuery对进程条进程实行支配。

本文由1010cc时时彩标准版发布于操作系统,转载请注明出处:jQuery完成的动态进程条功用示例,使用Bootstrap营

关键词:

上一篇:没有了

下一篇:没有了