Semantic-UI 图标加载状态

Semantic-UI图标可以作为加载状态的一种非常有用的工具。使用这些图标，您可以向用户显示数据正在加载或操作正在进行中。

基本用法

要在Semantic-UI中使用图标，您需要引用以下CSS文件:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>

然后，您可以在HTML中添加semantic-ui图标，如下所示:

<i class="icon loading"></i>

这会创建一个加载中图标。您可以使用其他图标，例如检查标记或错误标记:

<i class="icon checkmark"></i>
<i class="icon remove"></i>

加载中状态

使用Semantic-UI的 "loading" 类，可以创建一个旋转的加载中图标:

<div class="ui active centered inline loader"></div>

在这里，我们使用了一个div元素，并向其添加了类“ui active centered inline loader”。这个div将在屏幕中心显示，并显示一个旋转的圆圈，以表示加载进度。

操作中状态

Semantic-UI还提供了一种 "disabled" 类来表示正在进行某些操作的状态。例如，您的应用程序可能需要禁用登录按钮，直到待定的Ajax请求结束。以下是一个完整的示例:

<button class="ui primary button" id="login-button" disabled>登录</button>

在这个示例中，我们有一个按钮，并为其添加了 "disabled" 类，这会使按钮变为灰色，同时禁用了它的单击事件。

自定义图标

最后，Semantic-UI还允许您自定义图标，使您可以在您的Web应用程序中使用自己的标志或其他图像：

<i class="icon my-custom-logo"></i>

在这个示例中，我们使用了一个将 ".my-custom-logo" 类应用于一个元素的CSS样式。这将向元素添加您所定义的图标。