Spinner

载入状态

style1

普通加载,使用 fa-spinner-third

<i class="fal brand-color fa-spinner-third fa-spin fa-xs"></i>
<i class="fal brand-color fa-spinner-third fa-spin fa-sm"></i>
<i class="fal brand-color fa-spinner-third fa-spin fa-lg"></i>
<i class="fal brand-color fa-spinner-third fa-spin fa-2x"></i>
<i class="fal brand-color fa-spinner-third fa-spin fa-3x"></i>
<i class="fal brand-color fa-spinner-third fa-spin fa-5x"></i>

style2

大量内容、长时加载(可能会),使用 fa-circle-notch

<i class="fal brand-color fa-circle-notch fa-spin fa-xs"></i>
<i class="fal brand-color fa-circle-notch fa-spin fa-sm"></i>
<i class="fal brand-color fa-circle-notch fa-spin fa-lg"></i>
<i class="fal brand-color fa-circle-notch fa-spin fa-2x"></i>
<i class="fal brand-color fa-circle-notch fa-spin fa-3x"></i>
<i class="fal brand-color fa-circle-notch fa-spin fa-5x"></i>

sytle3

表示状态同步时,使用 fa-sync

<i class="fal brand-color fa-sync fa-spin fa-xs"></i>
<i class="fal brand-color fa-sync fa-spin fa-sm"></i>
<i class="fal brand-color fa-sync fa-spin fa-lg"></i>
<i class="fal brand-color fa-sync fa-spin fa-2x"></i>
<i class="fal brand-color fa-sync fa-spin fa-3x"></i>
<i class="fal brand-color fa-sync fa-spin fa-5x"></i>

使用说明

icons

<i class="fal fa-2x fa-spinner"></i>
<i class="fal fa-2x fa-spinner-third"></i>
<i class="fal fa-2x fa-circle-notch"></i>
<i class="fal fa-2x fa-sync"></i>
<i class="fal fa-2x fa-cog"></i>
<i class="fal fa-2x fa-stroopwafel"></i>

animating

fa-spin 旋转

fa-pulse 脉搏

<i class="fal fa-2x fa-spinner fa-spin"></i>
<i class="fal fa-2x fa-spinner fa-pulse"></i>

size

<i class="fal fa-cog fa-xs"></i>
<i class="fal fa-cog fa-sm"></i>
<i class="fal fa-cog fa-lg"></i>
<i class="fal fa-cog fa-2x"></i>
<i class="fal fa-cog fa-3x"></i>
<i class="fal fa-cog fa-5x"></i>
<i class="fal fa-cog fa-7x"></i>
<i class="fal fa-cog fa-10x"></i>