程序效果如下

实现进度条动画主要有两种方法：（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

JGUI源码：实现简单进度条(19)的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. JGUI源码：从头开始，建一个自己的UI框架（1）

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

  3. wpf 导出Excel Wpf Button 样式 wpf简单进度条 List泛型集合对象排序 C#集合

    wpf 导出Excel   1 private void Button_Click_1(object sender, RoutedEventArgs e) 2 { 3 4 ExportDataGrid ...

  4. JGUI源码：鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...

  5. JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  6. （二十三）原型模式详解（clone方法源码的简单剖析）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 原型模式算是JAVA中最简单 ...

  7. 实例源码--Android简单团购应用源码

      下载源码   技术要点: 1.HTTP通信技术 2.XML数据解析 3.控件的简单应用 4.源码带有非常详细的中文 注释 ...... 详细介绍: 1. HTTP通信技术 通 过HTTP通信技术, ...

  8. 基于u-boot源码的简单shell软件实现

    一.概述 1.shell概念 Shell(命令解析器),它用于接收用户输入的命令,进行解析,然后调用相应的应用程序,为使用者提供了使用软件的界面. shell是操作系统最外面的一层.shell管理你与 ...

  9. asp.net 的一个简单进度条功能

    我们先看下效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <sc ...

随机推荐

  1. 自学MongoDB(1)

    MongoDB是nosql(非关系型数据库)中的一种,面向文档的数据库,介于传统的结构化数据库(关系型数据库)与非关系型数据库(文件储存)之间的一种,具有数据结构非常松散和非常灵活的特点;常用于存储分 ...

  2. Windows上安装MySQL的完整教程

    1.     首先去官方网站下载压缩文件:https://dev.mysql.com/downloads/mysql/ 2.     解压下载的文件. 3.     将解压的所有文件放在一个文件夹里( ...

  3. extjs 中比较常见且好用的监听事件

    ComboBox listeners:{ expand:function(){ //此函数是,点击下拉框展开的时候事件 }, select:function(com, record, index){ ...

  4. 【java学习】Intelli Idea集成开发工具的使用

    == mac版直接下载地址: https://download.jetbrains.com/idea/ideaIU-2018.1.6.dmg   ==mac配置java环境变量: https://ji ...

  5. 文本相似度 — TF-IDF和BM25算法

    1,$TF-IDF$算法 $TF$是指归一化后的词频,$IDF$是指逆文档频率.给定一个文档集合$D$,有$d_1, d_2, d_3, ......, d_n \in D$.文档集合总共包含$m$个 ...

  6. 网络流24题 P1251 餐巾计划问题 拆点

    题目描述 一个餐厅在相继的 NN 天里,每天需用的餐巾数不尽相同.假设第 ii 天需要 r_iri​块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 pp 分;或者把旧餐巾送 ...

  7. 【原创】互联网项目中mysql应该选什么事务隔离级别

    摘要 企业千万家,靠谱没几家. 社招选错家,亲人两行泪. 祝大家金三银四跳槽顺利! 引言 开始我们的内容,相信大家一定遇到过下面的一个面试场景 面试官:"讲讲mysql有几个事务隔离级别?& ...

  8. vue.js实战——props单向数据流

    Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...

  9. centos7之openvpn搭建

    一.环境介绍 操作系统centos7.4 openvpn版本:openvpn-2.1 lzo版本:lzo-2.03 二.搭建 关闭firewalld防火墙,并设置开机不启动.关闭selinux sys ...

  10. Python视频人脸检测识别

    案例 这里我们还是使用 opencv 中自带了 haar人脸特征分类器,通过读取一段视频来识别其中的人脸. 代码实现:   动图有点花,讲究着看吧:   如果是捕捉摄像头,只需要改变以下代码即可: c ...