Home Web Front-end JS Tutorial 用jQuery模拟页面加载进度条的实现代码_jquery

用jQuery模拟页面加载进度条的实现代码_jquery

May 16, 2016 pm 05:58 PM
progress bar

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?
  我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示。
  首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码
  CSS

复制代码 代码如下:

*{margin:0;padding:0;font-size:12px}
.loading{position:relative;top:0;left:0}
.text input{float:left;color:#fff;height:32px;line-height:34px;padding:0 15px;background:#A70000;border:0}
.jindu{float:left;margin-left:14px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;font-size:0px;border-width:10px;border-color:transparent transparent transparent #A70000;border-style:dotted dotted dotted solid;position:absolute;left:-16px;top:5px}
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{width:150px;height:32px;line-height:32px;text-align:center;position:absolute}

HTML
复制代码 代码如下:






页面总进度 0%




这时候注意了,我们要引用jquery库,引用的位置不是在head区域,而是紧接着html代码下面写。为什么要这样,因为样式我们放head里的原因是保证页面加载第一步就把样式加载好,这样页面不会乱。而JS则不需要,再加上页面上大的文件主要也就是js,所以放在body里加载js是为了进度条考虑。
  进度条画好了,jquery引用了,我们现在要写个方法,也就是可以让进度条动起来
复制代码 代码如下:

var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
$('.loading').animate({top:'-32px'},1000,function(){
alert('页面加载完毕');
});
});
}else{
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
});
}
};

这里我写了个loading(a,b),两个参数分别是显示加载内容提示信息和加载进度百分比,然后,我用了其他几个js库做加载进度测试
复制代码 代码如下:












demo下载地址:在线演示 点击下载
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set the color of a progress bar using HTML and CSS? How to set the color of a progress bar using HTML and CSS? Sep 19, 2023 pm 08:25 PM

In website development, progress bars are an important part of the website. The progress bar shows the progress of the process. With the help of it, users can see the status of the work being done on the website, including load times, file uploads, file downloads, and other similar tasks. By default, it is gray. However, to make progress bars stand out and be visually appealing, you can use HTML and CSS to change their color. What is a progress bar? A progress bar is used to show the progress of a task. It is a graphical user interface element. It basically consists of a horizontal bar that gradually fills in as the task progresses, accompanied by a percentage value or other completion indicator. Progress bars are used in web applications to provide users with information about completing a process such as file upload, file download, or software installation.

How to implement page loading progress bar function in JavaScript? How to implement page loading progress bar function in JavaScript? Oct 27, 2023 am 08:57 AM

How does JavaScript implement the page loading progress bar function? In modern Internet applications, page loading speed is one of the key factors of user experience. To show users the loading process, many websites and applications use loading progress bars. JavaScript provides a simple and effective way to implement the page loading progress bar function. The specific implementation process is as follows: Create an HTML structure. First, create an HTML structure of a progress bar at a suitable location on the page. It is common to place the progress bar in

How to use Vue to implement progress bar effects How to use Vue to implement progress bar effects Sep 19, 2023 am 09:22 AM

How to use Vue to implement progress bar effects The progress bar is a common interface element that can be used to display the completion of a task or operation. In the Vue framework, we can implement special effects of the progress bar through some simple code. This article will introduce how to use Vue to implement progress bar effects and provide specific code examples. Create a Vue component First, we need to create a Vue component to implement the progress bar function. In Vue, components are reusable and can be used in multiple places. Create a file called Pro

How to use CSS to create a web page loading progress bar implementation steps How to use CSS to create a web page loading progress bar implementation steps Oct 26, 2023 am 11:00 AM

Implementation steps of how to use CSS to create a web page loading progress bar In modern web design, loading speed is crucial to user experience. In order to improve the user experience, you can use CSS to create a web page loading progress bar so that users can clearly understand the web page loading progress. This article will introduce the implementation steps of using CSS to create a web page loading progress bar, and provide specific code examples. Step 1: HTML structure First, you need to add a div element representing the progress bar in HTML, as shown below: <divclass=&q

Vue component development: implementation method of progress bar component Vue component development: implementation method of progress bar component Nov 24, 2023 am 08:56 AM

Vue component development: Progress bar component implementation method Preface: In Web development, the progress bar is a common UI component, often used to display the progress of operations in scenarios such as data requests, file uploads, and form submissions. In Vue.js, we can easily implement a progress bar component by customizing components. This article will introduce an implementation method and provide specific code examples. I hope it will be helpful to Vue.js beginners. Component structure and style First, we need to define the basic structure and style of the progress bar component.

How to use Vue and Element-UI to implement progress bar and loading animation effects How to use Vue and Element-UI to implement progress bar and loading animation effects Jul 21, 2023 pm 08:54 PM

How to use Vue and Element-UI to implement progress bar and loading animation effects. Vue.js is a lightweight front-end framework, and Element-UI is a UI component library based on Vue.js, which provides a rich set of components and interactions. The effect can help us quickly develop a beautiful front-end interface. This article will introduce how to use Vue and Element-UI to implement progress bar and loading animation effects. 1. Install and introduce Element-UI first,

How to create a progress bar using HTML and CSS How to create a progress bar using HTML and CSS Sep 05, 2023 am 09:09 AM

Overview Progress bars are the main component of any web application. Progress indicates the completion of a project or task. In this module, we will build a progress bar using HTML and style it with CSS. We will also provide progress animation for the progress bar. In this task, we will animate the progress bar using @keyframes. Use animation style properties such as animation duration, name, timing, etc. Algorithm Step 1 - Create HTML boilerplate in a text editor. Step 2 - Create parent div container and define class name as barContainer. Step 3 - Now create another child of the current parent div and define the class name. Step 4 - Create a child that inherits in progress and will be animated

PHP development: How to implement article reading progress bar and sharing function PHP development: How to implement article reading progress bar and sharing function Sep 22, 2023 am 08:06 AM

PHP development: How to implement article reading progress bar and sharing function Introduction: Article reading progress bar and sharing function are important functions that provide users with a better reading experience and facilitate the sharing of content. In PHP development, we can achieve these two functions through some technical means. This article will introduce you to the specific implementation method and give corresponding code examples. 1. Implementation of the article reading progress bar The key to implementing the article reading progress bar is to obtain the current user's reading progress (that is, the height of the currently scrolled document), and then convert it into a value relative to the entire article.

See all articles