from: http://digitalbush.com/projects/progress-bar-plugin
Overview
This is a progress bar plugin for jQuery.
Usage
First, include the progress bar javascript file.
<script src="jquery.progressbar.js"type="text/javascript"></script>
Next, include the styles necessary to render the progress bar correctly.
/* progress bar container */ #progressbar{ border:1px solid black; width:200px; height:20px; position:relative; color:black; } /* color bar */ #progressbar div.progress{ position:absolute; width:0; height:100%; overflow:hidden; background-color:#369; } /* text on bar */ #progressbar div.progress .text{ position:absolute; text-align:center; color:white; } /* text off bar */ #progressbar div.text{ position:absolute; width:100%; height:100%; text-align:center; }
Finally make the call to render the progress bar.
$("#progressbar").reportprogress(0);
In the demo below I'm running the progress bar from a timer like so.
var pct=0; var handle=0; function update(){ $("#progressbar").reportprogress(++pct); if(pct==100){ clearInterval(handle); $("#run").val("start"); pct=0; } } jQuery(function($){ $("#run").click(function(){ if(this.value=="start"){ handle=setInterval("update()",100); this.value="stop"; }else{ clearInterval(handle); this.value="start"; } }); $("#reset").click(function(){ pct=0; $("#progressbar").reportprogress(0); }); });
相关推荐
NULL 博文链接:https://justcoding.iteye.com/blog/775517
缺乏进度栏(Lopb)是一个Eclipse插件,用于跟踪开发人员等待文件签入/签出,代码编译,将应用程序发布到Web服务器以及其他IDE后台作业完成的时间。 在http://lopb.org上阅读更多内容
其中有些已经无法访问,或许是文件...jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling an input type file.Progress Bar Plugin.jQuery插件-表单
$ npm install @guillaumebriday/vue-scroll-progress-bar --save 或者 $ yarn add @guillaumebriday/vue-scroll-progress-bar 将插件安装到Vue中: import Vue from 'vue' import VueScrollProgressBar from '@...
用VC编写的进度条代码
This is NSIS plugin for progress bar. change the txt to zip
前进和后退的进展 平面闪亮设计 圆形进度条 可自定义的进度文本 添加和样式指示符 动画进度 用法 import 'phaser' ; import EasyProgressbarPlugin from 'phaser3-plugin-easyprogressbar' ; const game = new ...
Waiting for the progress bar 155 Progress bar options 156 Animating the progress bar 157 Creating a settings page 158 Pills of stack 159 Tabs in the middle 163 Adding the tab content 165 Using the ...
TRxProgress … own progress bar with gradient color TRxHoleShape … how simple create region on form. TRxFlexHelpPanel … simple hint panel for formulary. TRxDBGridSorter … sort grid data ...
2.Nyan progress bar 这是一个将你idea中的所有的进度条都变成萌新动画的小插件。 3.Material Theme UI 主题 4.Background image Plus 背景图片 5.activate-power-mode 输入效果 SMartIM 惊喜自己拉...
Vue-Ellipse-Progress 一个无需依赖的Vue.js插件,可创建精美且生动的圆形进度条,并通过SVG实现。 该插件的目的是结合其他可用库的最佳属性,并添加独特的功能,这些功能在具有友好界面的易于使用的组件中提供。 ...
5. Show progress window instead of a static window during FindInFiles and ReplaceInFiles. 6. Filename rendered incorrectly on tab bar while it contains '&' character. 7. Make highlighting (if enabled)...
Writing a Gradle Plugin Code Generation Advanced Gradle for Android Tips Testing with JUnit4 Testing with Espresso Testing with UI Automator Measuring Test Coverage Unit Testing MonkeyRunner and the ...
- PassMark KeyboardTest V2.2 1011 (or higher) for Plugin Keyboard testing. - PassMark Firewire Plugin V1.0 1000 (or higher) and a 揔anguru FireFlash?drive for Plugin Firewire testing. (*) Windows ...
Plugin Patterns PackageManager Tricks Remote Services and the Binding Pattern Advanced Manifest Tips Miscellaneous Integration Tips Reusable Components Android Studio Editors and Dialogs Advanced ...
29.zip Using Buttons on a Dialog Bar with CCmdUI 通过CCmdUI在对话框条中使用按纽(19KB)<END><br>30,30.zip Display help for dialog controls on the status bar 在状态条中显示对话框中控件的帮助...
In Progress FRONT END - corporate FRONT END - e-commerce UI: Sidebar Widget UI: Code Generator UI: Chatting bar UI: Extra UI Component Page with Top Navbar dashboard v3 More Plugins...
说唱吧 ... 可以在此博客找到有关此的更多信息。... bar 的值 0.0 - 1.0 宽度 尺寸 '100%' 插件宽度 高度 尺寸 '16px' 插件高度 活动 事件 参量 描述 onClick 位置 点击后触发 onChange 位置 当位置改变时触发
jQuery Line进度栏 一个轻量级的jquery progressbar插件 演示和文档 包括 <!-- In header --> <link rel="stylesheet" href="jquery.lineProgressbar.css"> <!-- In footer -->...jQuery选项方法
Contents at a Glance Foreword . . . . . . . . ....About the Author ....About the Technical Reviewers ....Acknowledgments....Introduction ....■CHAPTER 1 Introduction ....■CHAPTER 2 Structure of the NetBeans Platform ....