CSS 使用jQuery-UI自动完成功能显示Spinner

在本文中，我们将介绍如何使用CSS和jQuery-UI自动完成功能来显示Spinner（旋转图标）。Spinner是一种常用的加载指示器，用于显示正在进行的操作或加载过程中的状态。

阅读更多：CSS 教程

什么是Spinner

Spinner是一个以旋转图标的形式表示的加载指示器。它常用于显示正在进行的操作，例如数据加载、ajax请求等，以告诉用户系统正在工作，需要等待片刻。

CSS创建Spinner

创建一个Spinner只需要几行CSS代码就可以实现。下面是一个使用CSS创建的简单Spinner示例：

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

以上代码首先定义了一个.spinner类，它设置了Spinner的宽度、高度、边框样式和动画效果。使用border-radius: 50%将边框设置为圆形，并通过border-top和border-right设置两个相邻边框的样式，以实现旋转的效果。最后通过@keyframes定义了一个名为spin的动画，该动画使Spinner以线性方式无限旋转。

使用jQuery-UI自动完成功能显示Spinner

要实现在使用jQuery-UI自动完成功能时显示Spinner，我们需要借助jQuery的ajaxStart和ajaxStop事件。以下是一个使用了jQuery-UI的自动完成功能和Spinner的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Spinner with jQuery-UI Autocomplete</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <style>
    .spinner {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border-top: 4px solid #000;
      border-right: 4px solid transparent;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <input type="text" id="search-input">
  <div id="spinner" class="spinner" style="display: none;"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    (document).ready(function() {("#search-input").autocomplete({
        source: function(request, response) {
          ("#spinner").show(); // 显示Spinner.ajax({
            url: "http://example.com/search",
            data: {
              term: request.term
            },
            success: function(data) {
              ("#spinner").hide(); // 隐藏Spinner response(data); }, error: function() {("#spinner").hide(); // 隐藏Spinner
              response([]);
            }
          });
        }
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了jQuery-UI的自动完成功能来实现搜索框的提示，借助于source选项可以通过ajax获取数据。当用户输入文字时，通过ajax请求后台数据并显示Spinner来表示正在加载。请求成功后，隐藏Spinner，并通过response回调函数显示搜索结果。

其中，#search-input是一个输入框元素，#spinner是一个具有.spinner类的<div>元素，用于显示Spinner。在开始时，我们通过display: none;将其隐藏。当进行搜索时，通过jQuery的show()和hide()方法来显示或隐藏Spinner。