Pulse
Custom Pulse component for indication purposes.
Base Examples
Default label examples.
1
2
5
9
10
<span class="label pulse mr-10">
<span class="position-relative">1</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse mr-10">
<span class="position-relative">2</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse mr-10">
<span class="position-relative">5</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse mr-10">
<span class="position-relative">9</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse">
<span class="position-relative">10</span>
<span class="pulse-ring"></span>
</span>
Use
.pulse-{success|primary|danger|warning|info|dark|white|success}class to have color pulse options.
1
2
5
9
10
<span class="label pulse pulse-success mr-10">
<span class="position-relative">1</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse pulse-danger mr-10">
<span class="position-relative">2</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse pulse-warning mr-10">
<span class="position-relative">5</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse pulse-primary mr-10">
<span class="position-relative">9</span>
<span class="pulse-ring"></span>
</span>
<span class="label pulse pulse-info">
<span class="position-relative">10</span>
<span class="pulse-ring"></span>
</span>
Advance Examples
Using with buttons and icons:
<a href="#" class="btn btn-icon btn-light-primary pulse pulse-primary mr-5">
<i class="flaticon2-bell-5"></i>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light-success pulse pulse-success mr-5">
<i class="flaticon2-protected"></i>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light-danger pulse pulse-danger mr-5">
<i class="flaticon2-information"></i>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light-warning pulse pulse-warning mr-5">
<i class="flaticon2-gear"></i>
<span class="pulse-ring"></span>
</a>
