文档章节

JGUI源码:实现简单进度条(19)

o
 osc_n6euf5h6
发布于 2019/03/20 00:04
字数 288
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

程序效果如下

实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装

<style>
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>这是进度条演示代码</div>
    <script type="text/javascript">
      $(function() {
        showProcess1();
        showProcess2();
      });
      function showProcess1()
      {
        $('#processbar1 .loading').animate({'width':'100%'},500);
      }
      function showProcess2()
      {
        $('#processbar2 .loading').animate(
          {
            'width':'100%'},
            {
              step:function(now,fx){
                if(fx.prop=="width"){
                  var pos=Math.round(fx.pos*100);
                  $('#processbar2 .loading').html(pos+'%');
                }
            },
            duration:1000});
      }
    </script>
    <div class="jgui-processbar" id="processbar1"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
     <div class="loading"></div>
    </div>
    <div style="margin:10px">
    </div>
    <div class="jgui-processbar" id="processbar2"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
      <div class="loading"></div>
     </div>

需要注意的是,div  loading需要设置高度100%,因为div 默认的高度是auto,如果没有内容的话高度为0.
第一种方法单纯显示动画,第二种方法会更新进度到界面上。

写好后,发现loading宽度比父div宽度要宽,加上relative属性即可解决

<style>
      .jgui-processbar
      {
        position: relative;
      }
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
        position: relative;
      }
    </style>

 

界面演示:www.jgui.com

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
JGUI源码:从头开始,建一个自己的UI框架(1)

开篇 1、JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2、虽然现在vue技术比较火,但还在发展阶段,暂时先使用...

osc_x8jhvw7p
2019/02/23
4
0
JGUI源码:响应式布局简单实现(13)

首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧。 1、首先把显示区域分成12等分,boo...

osc_1x3afxmv
2019/03/06
1
0
Android官方下拉刷新控件 SwipeRefreshLayout

今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新增加的一个widget,于是赶紧抢先体验学习下。 SwipeRefreshLayout SwipeRefreshLayout字面意思...

嘻哈开发者
2014/05/05
4.7K
0
9款极具创意的HTML5/CSS3进度条动画

今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧。 1、HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这...

行者孙
2014/03/25
2.2K
0
android 自定义下载进度条

继承view实现下载进度条,大家可以参考修改出更好的实现方式,欢迎指正,下面是源码和截图: 1.测试代码: DownloadProgressBar dpb;synchronized void updateUIData(float rate){dpb.setPr...

blackylin
2013/04/18
903
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
30分钟前
20
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
51分钟前
17
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
59分钟前
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
45
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部