jquery等待进度条

在前端开发中，使用 jQuery 等工具库实现等待进度条是一种比较常见的需求。进度条可以给用户带来良好的交互体验，在等待长时间操作时，也可以起到提示作用。

下面是使用 jQuery 实现一个简单的等待进度条的代码：

  <div id="loading">
    <div class="spinner">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
  </div>

  // CSS 样式：

  #loading {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0,.5);
  }

  .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .dot1,.dot2 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    animation: sk-bounce 2s infinite ease-in-out;
  }

  .dot2 {
    animation-delay: -1s;
  }

  @keyframes sk-bounce {
    0%,100% {
      transform: scale(0);
    }

    50% {
      transform: scale(1);
    }
  }

代码解释:

• loading: 这个 DIV 黑色半透明背景覆盖整个页面，用于防止用户对页面进行任何操作。 spinner: 这个 DIV 用于显示动态的等待进度条。
• spinner 中有两个圆点，每个圆点使用 animation 属性实现 bounce 效果，动画时间为 2s，无限循环。

使用时，只需要通过 JS 控制 loading DIV 的显示和隐藏即可：

  $(document).ready(function() {
    $('#loading').show();

    $.ajax({
      url: 'your.api/address',success: function(data) {
        // do something
      },complete: function() {
        $('#loading').hide();
      }
    });
  });

在 Ajax 请求发起前显示 loading DIV，在 complete 响应函数中隐藏即可。

以上就是使用 jQuery 实现一个简单等待进度条的方法了。当然，这只是最基础的方法。具体实现还需要结合自己的项目需求和 UI 美感调整。