HTML实现进度条/加载框模版

以下是一个简单的HTML进度条和加载框的实现模版：

进度条模版：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Template</title>
<style>
  .progress-bar-container {
    width: 100%;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
  }
 
  .progress-bar {
    height: 30px;
    width: 0%;
    background-color: #76B900;
    border-radius: 10px;
    transition: width 1s ease-in-out;
  }
 
  .progress-text {
    padding: 5px 10px;
    font-size: 16px;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="progress-bar-container">
  <div class="progress-bar" style="width: 50%;">
    <div class="progress-text">50%</div>
  </div>
</div>
 
</body>
</html>

加载框模版：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Overlay Template</title>
<style>
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
  }
 
  .loading-overlay.active {
    visibility: visible;
    opacity: 1;
  }
 
  .loading-content {
    color: white;
    font-size: 24px;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="loading-overlay">
  <div class="loading-content">Loading...</div>
</div>
 
<script>
  // 显示加载框
  function showLoading() {
    document.querySelector('.loading-overlay').classList.add('active');
  }
 
  // 隐藏加载框
  function hideLoading() {
    document.querySelector('.loading-overlay').classList.remove('active');
  }
 
  // 示例：模拟加载操作
  window.onload = function() {
    showLoading();
    setTimeout(hideLoading, 3000); // 3秒后隐藏加载框
  }
</script>
 
</body>
</html>

这两个模版提供了简单的HTML和CSS来实现进度条和加载框，并附带了基本的JavaScript函数来控制加载框的显示和隐藏。这些模版可以根据实际需求进行扩展和定制。

HTML实现进度条/加载框模版

评论已关闭

推荐阅读