Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Animated Wifi Symbol using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.27k
    Comment on it

    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”.

    Below is the HTML code for the wifi symbol :-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Animated WIFI Symbol</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <div class="container">
    
    <div class="section">
    
    <h1>Animated Wifi Symbol</h1>
    
    <div class="wifi-symbol">
    
    <div class="wifi-circle first"></div>
    
    <div class="wifi-circle second"></div>
    
    <div class="wifi-circle third"></div>
    
    <div class="wifi-circle fourth"></div>
    
    </div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

    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 :-

    body {
    
    text-align: center;
    
    vertical-align: center;
    
    margin: 20px 10px 0;
    
    background-color: #31313B;
    
    }
    
    h1{
    
    font-size: 35px;
    
    font-weight: 600;
    
    color: #FFFFCC;
    
    }
    
    .wifi-symbol {
    
    display: none;
    
    }
    
    .wifi-symbol {
    
    display: block;
    
    position: absolute;
    
    top: 50%;
    
    display: inline-block;
    
    width: 150px;
    
    height: 150px;
    
    margin-top: -187.5px;
    
    -ms-transform: rotate(-45deg) translate(-100px);
    
    -moz-transform: rotate(-45deg) translate(-100px);
    
    -o-transform: rotate(-45deg) translate(-100px);
    
    -webkit-transform: rotate(-45deg) translate(-100px);
    
    transform: rotate(-45deg) translate(-100px);
    
    }
    
    .wifi-symbol .wifi-circle {
    
    box-sizing: border-box;
    
    -moz-box-sizing: border-box;
    
    display: block;
    
    width: 100%;
    
    height: 100%;
    
    font-size: 21.42857px;
    
    position: absolute;
    
    bottom: 0;
    
    left: 0;
    
    border-color: #FFFFCC;
    
    border-style: solid;
    
    border-width: 1em 1em 0 0;
    
    -webkit-border-radius: 0 100% 0 0;
    
    border-radius: 0 100% 0 0;
    
    opacity: 0;
    
    -o-animation: wifianimation 3s infinite;
    
    -moz-animation: wifianimation 3s infinite;
    
    -webkit-animation: wifianimation 3s infinite;
    
    animation: wifianimation 3s infinite;
    
    }
    
    .wifi-symbol .wifi-circle.first {
    
    -o-animation-delay: 800ms;
    
    -moz-animation-delay: 800ms;
    
    -webkit-animation-delay: 800ms;
    
    animation-delay: 800ms;
    
    }
    
    .wifi-symbol .wifi-circle.second {
    
    width: 5em;
    
    height: 5em;
    
    -o-animation-delay: 400ms;
    
    -moz-animation-delay: 400ms;
    
    -webkit-animation-delay: 400ms;
    
    animation-delay: 400ms;
    
    }
    
    .wifi-symbol .wifi-circle.third {
    
    width: 3em;
    
    height: 3em;
    
    }
    
    .wifi-symbol .wifi-circle.fourth {
    
    width: 1em;
    
    height: 1em;
    
    opacity: 1;
    
    background-color: #FFFFCC;
    
    -o-animation: none;
    
    -moz-animation: none;
    
    -webkit-animation: none;
    
    animation: none;
    
    }
    
    
    
    @-o-keyframes wifianimation {
    
    0% {
    
    opacity: 0.4;
    
    }
    
    5% {
    
    opactiy: 1;
    
    }
    
    6% {
    
    opactiy: 0.1;
    
    }
    
    100% {
    
    opactiy: 0.1;
    
    }
    
    }
    
    @-moz-keyframes wifianimation {
    
    0% {
    
    opacity: 0.4;
    
    }
    
    5% {
    
    opactiy: 1;
    
    }
    
    6% {
    
    opactiy: 0.1;
    
    }
    
    100% {
    
    opactiy: 0.1;
    
    }
    
    }
    
    @-webkit-keyframes wifianimation {
    
    0% {
    
    opacity: 0.4;
    
    }
    
    5% {
    
    opactiy: 1;
    
    }
    
    6% {
    
    opactiy: 0.1;
    
    }
    
    100% {
    
    opactiy: 0.1;
    
    }
    
    } 

    Conclusion :-

    Hence , I have created An Animated Wifi Symbol using CSS3 various properties.

    Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: