HTML, CSS and jQuery: Make an animated loading progress bar-JS Tutorial-php.cn

HTML, CSS and jQuery: Make an animated loading progress bar

王林

Release： 2023-10-27 10:00:52

Original

1611 people have browsed it

HTML, CSS and jQuery: Make an animated loading progress bar

HTML, CSS and jQuery: Make a loading progress bar with animated effects

The loading progress bar is a common web page loading effect, which allows users to Clearly see the loading progress of the current page to improve user experience. In this article, we will use HTML, CSS and jQuery to create a loading progress bar with animation effects, and provide specific code examples.

HTML Structure

First, let’s create the basic structure of HTML. We need a container element that contains the progress bar and add an element inside it that displays the progress.

<!DOCTYPE html>
<html>
<head>
  <title>加载进度条</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Copy after login

CSS Style

Next, we need to create a CSS style sheet to beautify the progress bar. We will use pseudo elements to create an animation effect on the progress bar.

body {
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  background-color: #ddd;
}

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  animation: progress-animation 2s linear;
}

/* 创建进度条动画 */
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 100%; }
}

Copy after login

jQuery code

Finally, we need to use jQuery to control the loading effect of the progress bar. We will use the animate() method to change the width of the progress bar within a specified time.

$(document).ready(function(){
  // 定义进度条的目标宽度（根据需要自行修改）
  var targetWidth = 80;

  // 获取进度条元素
  var progressBar = $(".progress-bar");

  // 使用animate()方法来改变进度条的宽度
  progressBar.animate({
    width: targetWidth + "%"
  }, 2000);
});

Copy after login

In the above code, after the page is loaded, we use the animate() method to gradually increase the width of the progress bar from 0% to the specified target width (here is 80%), the process lasts 2 seconds.

Save the above code as a script.js file, and save the CSS style as a style.css file, placed in the same directory as the HTML file.

Now, when you open an HTML file and preview the page in your browser, you will see a loading progress bar with animation.

To sum up, we used HTML, CSS and jQuery to successfully create a loading progress bar with animated effects. By mastering these basic knowledge, we can achieve more rich interactive effects in web pages and improve user experience. Hope this article helps you!

The above is the detailed content of HTML, CSS and jQuery: Make an animated loading progress bar. For more information, please follow other related articles on the PHP Chinese website!