Home Web Front-end JS Tutorial js asynchronous processing progress bar_javascript skills

js asynchronous processing progress bar_javascript skills

May 16, 2016 pm 06:30 PM
Asynchronous processing progress bar

1. Above the picture first, the effect is as follows:

2. How to use

Copy the code The code is as follows:

var loader=new Ajaxloader(this._ContentID,{Text:'loading...',Top:50});
loader.Show();

3. The code is listed:
Copy the code The code is as follows:

/*
Processing progress bar , Asynchronous loader
*/
var Ajaxloader=new Class();
Ajaxloader.prototype=
{
Text: 'Data loading...',
Parent:null,
Left:0,
Top:30,
Initialize:function(parentid,o)
{
//alert('Init');
Extend (this,o);
if(parentid)
{
this.Parent=$(parentid);
}
return this;
},
Show:function ()
{
if(this.Parent)
{
var _obj = this.Create();
this.Parent.appendChild(_obj);
}
},
Create:function()
{
var _div=document.createElement('div');
var _img=document.createElement('img');
_img.src ='<%=WebResource("DSKJ.Web.UI.WebControls.Images.ajaxloader.gif")%>';
_img.style.cssText='display:block;';
var _load =document.createElement('h3');
_load.innerText = this.Text;
_load.style.cssText='margin-top:5px;font-size:13px';
_div.appendChild (_img);
_div.appendChild(_load);
//Set div style
_div.style.cssText='font-size:13px;text-align:center;margin:0 auto;display :block;z-Index:99';
_div.style.marginTop=this.Top;
return _div;
}
}

4. Conclusion
Welcome to buy bricks
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 Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

Hot Topics

Java Tutorial
1667
14
PHP Tutorial
1273
29
C# Tutorial
1255
24
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 debug asynchronous processing issues in PHP functions? How to debug asynchronous processing issues in PHP functions? Apr 17, 2024 pm 12:30 PM

How to debug async processing issues in PHP functions? Use Xdebug to set breakpoints and inspect stack traces, looking for calls related to coroutines or ReactPHP components. Enable ReactPHP debug information and view additional log information, including exceptions and stack traces.

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.

Asynchronous processing skills in Python web development Asynchronous processing skills in Python web development Jun 17, 2023 am 08:42 AM

Python is a very popular programming language and is also widely used in the field of web development. With the development of technology, more and more people are beginning to use asynchronous methods to improve website performance. In this article, we will explore asynchronous processing techniques in Python web development. 1. What is asynchronous? Traditional web servers use a synchronous approach to handle requests. When a client initiates a request, the server must wait for the request to complete processing before continuing to process the next request. On high-traffic websites, this same

Using Redis to implement asynchronous processing in PHP Using Redis to implement asynchronous processing in PHP May 16, 2023 pm 05:00 PM

With the development of the Internet, the performance and efficiency of Web applications have become the focus of attention. PHP is a commonly used web development language, and Redis is a popular in-memory database. How to combine the two to improve the performance and efficiency of web applications has become an important issue. Redis is a non-relational in-memory database with the advantages of high performance, high scalability and high reliability. PHP can use Redis to implement asynchronous processing, thereby improving the responsiveness and concurrency of web applications

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

See all articles