语义 UI 加载器变体

简介

语义 UI 加载器变体是一个基于语义 UI 框架的扩展，其主要作用是在加载页面时为用户提供交互性的反馈。通过使用语义 UI 加载器，用户可以更快速地获知正在加载的状态，从而提高用户体验。

安装

语义 UI 加载器变体可以通过多种方式进行安装，包括 NPM 安装和直接使用 CDN 进行引用。

NPM

npm install semantic-ui-loader

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>

使用

语义 UI 加载器变体提供了多种不同的样式和效果，可以灵活地应用于不同的场景和需求。以下是一些常见的用法。

基本用法

通过在需要加载的元素上添加 .ui.loader 类，即可启用加载器：

<div class="ui loader"></div>

不同类型

语义 UI 加载器变体提供了多种不同的加载器类型，包括 inverted、text、active 等等。可以通过在 .ui.loader 类后添加对应的类名来应用不同类型的加载器。

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

尺寸

加载器的尺寸可以在 .ui.loader 类的基础上，通过添加 tiny、small、medium、large、big、huge 等等不同的尺寸类名来控制。

<div class="ui small active loader"></div>
<div class="ui large text loader">Loading</div>

自定义文本

可以在加载器里添加自定义文本，来提示用户具体正在加载的内容。

<div class="ui active loader">
  <span>Loading...</span>
</div>

结语

语义 UI 加载器变体提供了丰富的样式和效果，可以应用于多种不同的场景和需求。通过合理地使用加载器，可以为用户提供更好的体验。