fa-stack-ping

Link pacote: https://packagist.org/packages/gsferro/fa-stack-ping

by gsferroti

HTML

<html>
  <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
      
    </style>
  </head>
  <body>
    <div>
    <h3>Online</h3>
      <span class="fa-stack-ping" title="online">
      <i class="fa fa-circle fa-stack-1x text-success"></i>
      <i class="fa fa-circle fa-stack-1x text-success fa-animate-ping"></i>
    </span>
    </div>
    
    <div>
    <h3>Offline</h3>
      <span class="fa-stack-ping" title="offline">
      <i class="fa fa-circle fa-stack-1x text-red"></i>
      <i class="fa fa-circle fa-stack-1x text-red fa-animate-ping"></i>
    </span>
    </div>
    
  </body>  
</html>

CSS

/* Import css package */
/* Keyframe ping */
@keyframes ping {
   75%, 100% {
      transform: scale(2);
      opacity: 0;
   }
}

/* Classe de container para o efeito */
.fa-stack-ping {
   position: relative;
   display: inline-block;
   width: 1em;
   height: 1em;
   line-height: 1em;
   vertical-align: text-top;
}

/* Efeito de ping */
 .fa-animate-ping {
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
}

/* Caso precise virar somente 45º */
.fa-rotate-45 {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
/* ------------------------------------- */

/* demo */
.text-success {
        color: #3c763d
      }
      
      .text-red {
        color: #dd4b39 
      }