Home > Article > Web Front-end > Several methods of javascript progress bar

Several methods of javascript progress bar

高洛峰Original: 2016-12-16 16:38:531094browse

Let’s take a look at the final effect first:

The first step is to basically build the basic code and see the effect demonstration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

The second step is to add text display to the progress bar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

The principle is to use relative Positioning and absolute positioning, and then control the progress through different backgrounds. Next we look at the second way to create a progress bar.

The third step, the second way to make a progress bar---directly use pictures + background pictures

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

The principle of this method is to use an img picture, and then set a background picture for the img picture, through the background picture background position property to display different parts.

Of course, this method has some requirements for pictures. If you look carefully, you will find that the width is 2 times that of img.
In addition, the picture must be transparent gif, which means hollow. hehe. No progress bar is visible. In the example, background-position is the px value. In fact, you can use % to control it more accurately, such as: background-position:80% 50%; etc.
In general, this should be considered a skill and can be used in actual projects.

Step 4, Application
Finally we look at a simple application:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style> 
*{

Use animate to control the background-position of the image to achieve the progress bar effect.

Of course you can also use the first method. What needs to be changed in the first method is the width attribute of the progress bar.

For more javascript progress bar related articles, please pay attention to the PHP Chinese website!

Statement：

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

Previous article：ProgressBar.js – Beautiful responsive SVG progress barNext article：ProgressBar.js – Beautiful responsive SVG progress bar

See more

Several methods of javascript progress bar

Related articles