SONar EFFECT

HTML

<body style="font-family: Verdana, Geneva, sans-serif; background-color: #4285F4; color:#fff;">
    <div>
        <header>
            <div><span  style="font-weight:bold;margin-bottom:20px;">Sonar/Beacon Effect</span>
                <br />
                <span style="font-weight: normal;">1.  </span> Fade out center circle
                <br />
                <span style="font-weight: normal;">2.  </span> Expand out 2 transparent circles with outer glows
                <br />
                <span style="font-weight: normal;">3.  </span> Fade out 2 Circles as they expand outwards

            </div>
            
        </header>
        <div class="icon-wrap icon-effect">
            <div class="icon">Settings</div>
        </div>
    </div>
    
    <div class="animate-flicker">Loading...</div>
     <div class="animate-flicker">Loading...</div>
      <div class="animate-flicker">Loading...</div>
</body>

CSS

@keyframes flickerAnimation {
  0%   { opacity:1;
  }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

.icon-wrap {
    text-align: center;
    margin: 0 auto;
    padding: 2em 0 3em;
}

.icon {
    display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 15px 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 10;
    color: #fff;
}

.icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.icon:before {
    background-color: #cccccc;
}

/* Sonar Effect */
.icon-effect .icon {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background .5s;
    -moz-transition: -moz-transform ease-out 0.1s, background .5s;
    transition: transform ease-out 0.1s, background .5s;
}

.icon-effect .icon:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}


.icon-effect .icon{
	background: rgba(255,255,255,0.05);
	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);
	-ms-transform: scale(0.93);
	transform: scale(0.93);
	color: #fff;
}

.icon-effect .icon {
    -webkit-animation: sonarEffect 1.3s ease-out infinite;
    -moz-animation: sonarEffect 1.3s ease-out infinite;
    animation: sonarEffect 1.3s ease-out infinite;
}


/* Chrome, mobile browser support  */
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
       ...

JavaScript

/* GIT HUB  
       

For more resources visit:
https://github.com/cnewby


*/