Bootstrap5 加載效果

要?jiǎng)?chuàng)建加載中效果可以使用 .spinner-border 類:

實(shí)例

<
div

class
=
"
spinner-border
"
>
div
>

嘗試一下 ?

可以使用文本顏色類設(shè)置不同的顏色：

實(shí)例

<
div

class
=
"
spinner-border text-muted
"
>
div
>

<
div

class
=
"
spinner-border text-primary
"
>
div
>

<
div

class
=
"
spinner-border text-success
"
>
div
>

<
div

class
=
"
spinner-border text-info
"
>
div
>

<
div

class
=
"
spinner-border text-warning
"
>
div
>

<
div

class
=
"
spinner-border text-danger
"
>
div
>

<
div

class
=
"
spinner-border text-secondary
"
>
div
>

<
div

class
=
"
spinner-border text-dark
"
>
div
>

<
div

class
=
"
spinner-border text-light
"
>
div
>

嘗試一下 ?

閃爍的加載效果

使用 .spinner-grow 類來設(shè)置閃爍的加載效果:

實(shí)例

<
div

class
=
"
spinner-grow text-muted
"
>
div
>

<
div

class
=
"
spinner-grow text-primary
"
>
div
>

<
div

class
=
"
spinner-grow text-success
"
>
div
>

<
div

class
=
"
spinner-grow text-info
"
>
div
>

<
div

class
=
"
spinner-grow text-warning
"
>
div
>

<
div

class
=
"
spinner-grow text-danger
"
>
div
>

<
div

class
=
"
spinner-grow text-secondary
"
>
div
>

<
div

class
=
"
spinner-grow text-dark
"
>
div
>

<
div

class
=
"
spinner-grow text-light
"
>
div
>

嘗試一下 ?

設(shè)置加載效果大小

使用.spinner-border-sm 或 .spinner-grow-sm 類來創(chuàng)建加載效果的大小:

實(shí)例

<
div

class
=
"
spinner-border spinner-border-sm
"
>
div
>

<
div

class
=
"
spinner-grow spinner-grow-sm
"
>
div
>

嘗試一下 ?

加載按鈕

我們也可以設(shè)置一個(gè)正在加載的按鈕。

實(shí)例

<
button

class
=
"
btn btn-primary
"
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>

button
>

<
button

class
=
"
btn btn-primary
"
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>

<
button

class
=
"
btn btn-primary
"

disabled
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>

<
button

class
=
"
btn btn-primary
"

disabled
>

<
span

class
=
"
spinner-grow spinner-grow-sm
"
>
span
>
Loading..
button
>

嘗試一下 ?

當(dāng)前題目：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5加載效果
本文鏈接：http://m.fisionsoft.com.cn/article/cdsiigo.html