Semantic-UI 加载器内联中心变化

在许多程序中，需要使用加载器（loader）来提示用户正在加载数据。Semantic-UI 提供了一个方便的加载器组件，可以轻松地为网站或应用程序添加加载器。

在本文中，我们将介绍如何在加载器内部实现中心变化。这样，在加载器出现时，它将以网页或应用程序的中心为基准而不是页面的左上角。

实现加载器

首先，我们需要实现一个基本的加载器。这可以通过 Semantic-UI 的标记和样式来实现。要实现加载器，我们需要在一个包含所有内容的 div 中添加标记。然后，我们将该 div 定义为加载器组件，并添加相应的样式类。

<div class="ui active inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

在这里，我们将 .ui.active.inverted.dimmer 类添加到加载器 div 中，这将显示一个半透明背景。然后，我们将 .ui.text.loader 类添加到包含加载消息的 div 中，这将为文本添加样式。

定义中心坐标

要将加载器放置在页面中心，我们需要计算出中心坐标。我们可以使用 JavaScript 来做到这一点。

var $loader = $('.ui.active.inverted.dimmer');
var $window = $(window);

function centerLoader() {
  var loaderHeight = $loader.outerHeight();
  var windowHeight = $window.height();
  var top = (windowHeight - loaderHeight) / 2;
  $loader.css('top', top);
}

centerLoader();

这个代码片段首先获取 $loader 和 $window 对象。然后，我们定义了一个函数 centerLoader()，该函数计算出加载器高度和视窗高度之间的差异，并将加载器的顶部位置设置为该值的一半。

最后，我们调用 centerLoader() 函数，以使加载器始终位于页面的中心。

监听调整事件

我们还需要在浏览器窗口大小发生更改时重新计算加载器的位置。为了实现这一点，我们需要借助监听调整事件的能力。

$(window).on('resize', function() {
  centerLoader();
});

这段代码监听 resize 事件，然后在每次调整浏览器窗口大小时，重新计算加载器的位置。

完整代码

最终代码如下所示：

<div class="ui active inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var $loader = $('.ui.active.inverted.dimmer');
var $window = $(window);

function centerLoader() {
  var loaderHeight = $loader.outerHeight();
  var windowHeight = $window.height();
  var top = (windowHeight - loaderHeight) / 2;
  $loader.css('top', top);
}

$(window).on('resize', function() {
  centerLoader();
});

centerLoader();
</script>

该代码块包括加载器 div、样式和 JavaScript 代码。您只需将其复制粘贴到您的 HTML 文件中即可。

现在，当加载器出现时，它将位于页面的中心。尝试调整浏览器窗口大小，加载器仍然会始终保持在中心位置。

结论

在本文中，我们介绍了如何使用 Semantic-UI 的加载器组件，以及如何在其内部实现中心变化。通过使用 JavaScript 和允许监听窗口大小调整的事件，我们可以轻松地为您的网站或应用程序添加漂亮的加载器。