Home Web Front-end JS Tutorial js ajax progress bar code when loading

js ajax progress bar code when loading

May 24, 2018 pm 04:12 PM
ajax javascript code

Using ajax to load the progress bar in the web page allows the user to judge the waiting time in advance, and can also reduce the user's psychological anxiety while waiting for the information to be loaded. Therefore, the progress bar is essential for loading. Here is what I will tell you Introducing how the ajax loading progress bar code is implemented

The final effect is shown in the figure below. It can be displayed on both PC and mobile terminals. The calling method is also very simple. Start calling: loading.baosight.showPageLoadingMsg(false), alse represents unrealistic loading instructions, and true displays loading instructions. After the call is completed, call: loading.baosight.hidePageLoadingMsg(). There are two files in the entire code, one is a js file and the other is a css file. Remember not to forget to introduce jquery.js

css file

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

#_loadMsg{

 display: inline-block;

 width: 100%;

 text-align: center;

 line-height: 45;

 padding-left: 20px;

 display : none;

}

 

#_loading_p {

 vertical-align: middle;

 display: inline-block;

 width: 100%;

 height: 100%;

 margin: 0 auto;

 text-align: center;

 position: absolute;

 z-index: 3;

 line-height: 40;

 opacity: 0.5;

 display : none;

 background: #CCCCCC;

}

 

#_loading_p span {

 display: inline-block;

 width: 10px;

 height: 40px;

 animation-name: scale;

 -webkit-animation-name: scale;

 -moz-animation-name: scale;

 -ms-animation-name: scale;

 -o-animation-name: scale;

 animation-duration: 1.2s;

 -webkit-animation-duration: 1.2s;

 -moz-animation-duration: 1.2s;

 -ms-animation-duration: 1.2s;

 -o-animation-duration: 1.2s;

 animation-iteration-count: infinite;

 -webkit-animation-iteration-count: infinite;

 -moz-animation-iteration-count: infinite;

 -ms-animation-iteration-count: infinite;

 -o-animation-iteration-count: infinite;

}

span.item-1 {

 background: #2ecc71;

}

span.item-2 {

 background: #3498db;

}

span.item-3 {

 background: #9b59b6;

}

span.item-4 {

 background: #e67e22;

}

span.item-5 {

 background: #c0392b;

}

span.item-6 {

 background: #e74c3c;

}

span.item-7 {

 background: #e74c8c;

}

 

.item-1 {

 animation-delay: -1s;

 -webkit-animation-delay: -1s;

 -moz-animation-delay: -1s;

 -ms-animation-delay: -1s;

 -o-animation-delay: -1s;

}

 

.item-2 {

 animation-delay: -0.9s;

 -webkit-animation-delay: -0.9s;

 -moz-animation-delay: -0.9s;

 -ms-animation-delay: -0.9s;

 -o-animation-delay: -0.9s;

}

 

.item-3 {

 animation-delay: -0.8s;

 -webkit-animation-delay: -0.8s;

 -moz-animation-delay: -0.8s;

 -ms-animation-delay: -0.8s;

 -o-animation-delay: -0.8s;

}

 

.item-4 {

 animation-delay: -0.7s;

 -webkit-animation-delay: -0.7s;

 -moz-animation-delay: -0.7s;

 -ms-animation-delay: -0.7s;

 -o-animation-delay: -0.7s;

}

 

.item-5 {

 animation-delay: -0.6s;

 -webkit-animation-delay: -0.6s;

 -moz-animation-delay: -0.6s;

 -ms-animation-delay: -0.6s;

 -o-animation-delay: -0.6s;

}

 

.item-6 {

 animation-delay: -0.5s;

 -webkit-animation-delay: -0.5s;

 -moz-animation-delay: -0.5s;

 -ms-animation-delay: -0.5s;

 -o-animation-delay: -0.5s;

}

 

.item-7 {

 animation-delay: -0.4s;

 -webkit-animation-delay: -0.4s;

 -moz-animation-delay: -0.4s;

 -ms-animation-delay: -0.4s;

 -o-animation-delay: -0.4s;

}

 

@-webkit-keyframes scale {

 0%, 40%, 100% {

 -moz-transform: scaleY(0.2);

 -ms-transform: scaleY(0.2);

 -o-transform: scaleY(0.2);

 -webkit-transform: scaleY(0.2);

 transform: scaleY(0.2);

 }

 

 20%, 60% {

 -moz-transform: scaleY(1);

 -ms-transform: scaleY(1);

 -o-transform: scaleY(1);

 -webkit-transform: scaleY(1);

 transform: scaleY(1);

 }

}

@-moz-keyframes scale {

 0%, 40%, 100% {

 -moz-transform: scaleY(0.2);

 -ms-transform: scaleY(0.2);

 -o-transform: scaleY(0.2);

 -webkit-transform: scaleY(0.2);

 transform: scaleY(0.2);

 }

 

 20%, 60% {

 -moz-transform: scaleY(1);

 -ms-transform: scaleY(1);

 -o-transform: scaleY(1);

 -webkit-transform: scaleY(1);

 transform: scaleY(1);

 }

}

@-ms-keyframes scale {

 0%, 40%, 100% {

 -moz-transform: scaleY(0.2);

 -ms-transform: scaleY(0.2);

 -o-transform: scaleY(0.2);

 -webkit-transform: scaleY(0.2);

 transform: scaleY(0.2);

 }

 

 20%, 60% {

 -moz-transform: scaleY(1);

 -ms-transform: scaleY(1);

 -o-transform: scaleY(1);

 -webkit-transform: scaleY(1);

 transform: scaleY(1);

 }

}

@keyframes scale {

 0%, 40%, 100% {

 -moz-transform: scaleY(0.2);

 -ms-transform: scaleY(0.2);

 -o-transform: scaleY(0.2);

 -webkit-transform: scaleY(0.2);

 transform: scaleY(0.2);

 }

 

 20%, 60% {

 -moz-transform: scaleY(1);

 -ms-transform: scaleY(1);

 -o-transform: scaleY(1);

 -webkit-transform: scaleY(1);

 transform: scaleY(1);

 }

}

Copy after login

js file

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

var loading = {

 baosight : {

  showPageLoadingMsg : function(showMessage){

  if($("#_loading_p").length == 0){

   $("body").append(&#39;<p id="_loading_p"><span class="item-1"></span><span class="item-2"></span><span class="item-3"></span><span class="item-4"></span><span class="item-5"></span><span class="item-6"></span><span class="item-7"></span></p>&#39;);

  }

  if($("#_loadMsg").length == 0){

   $("body").append(&#39;<p id="_loadMsg">正在加载,请稍候... ...</p>&#39;);

  }

  if(showMessage == true || showMessage == "true" ){

   $("#_loadMsg").show();

  }

  $("#_loading_p").show();

  },

  hidePageLoadingMsg :function() {

  $("#_loading_p").hide();

  $("#_loadMsg").hide();

  }

 }

}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Two solutions to Ajax cross-domain problems

Click to load based on ajaxMore Load this page without refreshing

How to solve ajax failure on Google Chrome browser

The above is the detailed content of js ajax progress bar code when loading. For more information, please follow other related articles on the PHP Chinese website!

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)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
What to do if the blue screen code 0x0000001 occurs What to do if the blue screen code 0x0000001 occurs Feb 23, 2024 am 08:09 AM

What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart

GE universal remote codes program on any device GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

Resolve code 0xc000007b error Resolve code 0xc000007b error Feb 18, 2024 pm 07:34 PM

Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

How to use Copilot to generate code How to use Copilot to generate code Mar 23, 2024 am 10:41 AM

As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for &quot;PowerPlatformTool&quot; and click the Install button

How to solve the 403 error encountered by jQuery AJAX request How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

What does the blue screen code 0x000000d1 represent? What does the blue screen code 0x000000d1 represent? Feb 18, 2024 pm 01:35 PM

What does the 0x000000d1 blue screen code mean? In recent years, with the popularization of computers and the rapid development of the Internet, the stability and security issues of the operating system have become increasingly prominent. A common problem is blue screen errors, code 0x000000d1 is one of them. A blue screen error, or "Blue Screen of Death," is a condition that occurs when a computer experiences a severe system failure. When the system cannot recover from the error, the Windows operating system displays a blue screen with the error code on the screen. These error codes

How to solve jQuery AJAX request 403 error How to solve jQuery AJAX request 403 error Feb 19, 2024 pm 05:55 PM

jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error

See all articles