语义 UI 加载器大小变化

语义 UI 是一个优秀的 UI 框架，提供了许多易于使用和灵活的组件。其中之一是加载器（Loader）组件，它在页面或者组件加载时可以显示一些反馈信息，表明正在处理请求。

加载器组件不仅可以改变其自身的大小，还可以改变其所包含元素的大小和位置。这篇文章将介绍如何使用语义 UI 加载器组件来实现大小变化。

加载器组件

首先，我们需要了解加载器组件的用法。加载器可以通过以下代码定义：

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

其中，.ui.active.dimmer 是一个遮罩层，.ui.big.text.loader 是一个文本样式的加载器。当包含这个代码块的元素被加载时，遮罩层和文本加载器将显示在元素的中心位置。

加载器组件有很多属性可以用来自定义样式，例如大小、颜色、形状。以下是一些自定义加载器样式的示例：

<div class="ui active inverted dimmer">
  <div class="ui small text loader">Small content loader</div>
</div>

<div class="ui active dimmer">
  <div class="ui small text loader">Small size loader</div>
</div>

<div class="ui active large dimmer">
  <div class="ui big text loader">Big size loader</div>
</div>

<div class="ui active inverted dimmer">
  <div class="ui large text loader">Large content loader</div>
</div>

加载器大小变化

语义 UI 加载器组件可以使用 .ui.scale 类来实现大小变化。该类可以使用以下四种级别：

1. .ui.mini：最小级别
2. .ui.tiny：极小级别
3. .ui.small：小级别
4. .ui.large：大级别

以下是一些使用.ui.scale类的示例：

<div class="ui active dimmer">
  <div class="ui mini text loader">Mini loader</div>
</div>

<div class="ui active dimmer">
  <div class="ui small text loader">Small loader</div>
</div>

<div class="ui active dimmer">
  <div class="ui large text loader">Large loader</div>
</div>

如果想要更改 .ui.scale 类的级别，只需要在 HTML 元素上添加该类即可。

总结

在本文中，我们介绍了如何使用语义 UI 加载器组件来实现大小变化。我们首先了解了加载器组件的用法，然后介绍了如何使用 .ui.scale 类来实现大小变化。这两个步骤可以使我们自定义非常灵活的加载器样式。

希望本文对你有所帮助，愿你在开发中能够更好地使用语义 UI 加载器组件。