Swinging Bell Notification Icon
Create an animated notification bell with Tailwind
Using an SVG Bell icon and custom tailwind class, we can make a bell symbol that swings to draw the user's attention.
Create the Icon
Not a requirement for this example (you could in-line the SVG) but here I have downloaded one of the Heroicons from https://heroicons.dev/ and made it into a Laravel 7 component.
views/components/svg/bell.blade.php
This uses most of the code copied from the heroicons site, but with the addition of merging any passed attributes.
Create the blade content for the bell
Create Tailwind Extension
In the code above, you will see a new class; animate-swing
we add this using the tailwind.config.js file
The bell is rotated around a point that is in the centre top of the icon, starting at 15 degrees through 0 degrees to -15 degrees and back again over a 1 second duration.
Last updated