Spinner

载入状态

style1

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

<i class="fas text-primary fa-spinner-third fa-spin fa-xs"></i>
<i class="fas text-primary fa-spinner-third fa-spin fa-sm"></i>
<i class="fas text-primary fa-spinner-third fa-spin fa-lg"></i>
<i class="fas text-primary fa-spinner-third fa-spin fa-2x"></i>
<i class="fas text-primary fa-spinner-third fa-spin fa-3x"></i>
<i class="fas text-primary fa-spinner-third fa-spin fa-5x"></i>

style2

大量内容、长时加载（可能会），使用 fa-circle-notch。

<i class="fas text-primary fa-circle-notch fa-spin fa-xs"></i>
<i class="fas text-primary fa-circle-notch fa-spin fa-sm"></i>
<i class="fas text-primary fa-circle-notch fa-spin fa-lg"></i>
<i class="fas text-primary fa-circle-notch fa-spin fa-2x"></i>
<i class="fas text-primary fa-circle-notch fa-spin fa-3x"></i>
<i class="fas text-primary fa-circle-notch fa-spin fa-5x"></i>

sytle3

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

<i class="fas text-primary fa-sync fa-spin fa-xs"></i>
<i class="fas text-primary fa-sync fa-spin fa-sm"></i>
<i class="fas text-primary fa-sync fa-spin fa-lg"></i>
<i class="fas text-primary fa-sync fa-spin fa-2x"></i>
<i class="fas text-primary fa-sync fa-spin fa-3x"></i>
<i class="fas text-primary fa-sync fa-spin fa-5x"></i>

使用说明

icons

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

animating

fa-spin 旋转

fa-pulse 脉搏

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

size

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