角标

1 2 3 4 5

消息^99⁺


<span class="badge badge-default radius">1</span>
<span class="badge badge-primary radius">2</span>
<span class="badge badge-secondary radius">3</span>
<span class="badge badge-success radius">4</span>
<span class="badge badge-warning radius">5</span>

<div class="mt-20 f-18">
	消息<sup><span class="badge badge-danger radius">99<sup>+</sup></span></sup>
</div>

加载


<div class="spinner-border f-f00" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border f-fff0" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border f-00f" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border f-333" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

呼吸灯


<div class="spinner-grow lightblue" role="status"></div>
<div class="spinner-grow skyblue" role="status"></div>
<div class="spinner-grow green" role="status"></div>
<div class="spinner-grow orange" role="status"></div>
<div class="spinner-grow red" role="status"></div>
<div class="spinner-grow yellow" role="status"></div>
<div class="spinner-grow lightgreen" role="status"></div>
<div class="spinner-grow black" role="status"></div>
<div class="spinner-grow blue" role="status"></div>
<div class="spinner-grow white" role="status"></div>