Hello readers, In today's blog I have tried to make An animated WIFI symbol using CSS3 properties.
As using CSS3 animation and transform rotate property , I have created an animated wifi symbol showing the increase and decrease in the signals with the help of animation.
In the HTML code , Firstly I have created a div with a wifi symbol class name. As the wifi symbol has three semi-circles and a small arc like a circle with different width and height that basically shows the signal speeds which can be created using CSS3 properties.
Now for creating a small sector and the remaining semi-circles I need to create different div with the class names as “wifi-circle first” , “wifi-circle second”, “wifi-circle third” and “wifi-circle fourth”.
Now , basically the work start for creating the wifi symbol to this class I have adjusted its height and width , sets its position to absolute and have set the transform rotate and translate property to it.
To the wifi circle , I have set the border-radius to make it a semi-circle including the border width and style .By adjusting its height, width and position to absolute and setting opacity to zero (0). As the wifi-circles has animation over it so I have set the animation-duration to infinite running with a time-function of 3 sec. To the first circle, I have set an animation delay of 800ms.
Now moving over to the next semi-circle , again I have adjusted the animation-delay to 400ms and adjusted its height and width.
As moving more forward to the next semi-circle again I need to adjust the height and the width .
Now moving downward to the last semi-circle I have set the opacity to 1, set the background-color , adjusted its height and width and has applied no animation effect to it .
I have also used keyframe to the wifianimation at 0 , 5 ,6 and 100 percentage for various browsers.
Below is the CSS code for the animated wifi symbol :-