Animated online indicator

songohan

Well-known member
Babiato Lover
GiveAway Master
Trusted Uploader
Jun 1, 2018
369
908
93
⭐⭐⭐⭐⭐
Animated online indicator
____________________________________

A simple animation on the online member indicator ;)
  • In extra.less template, add this:
CSS:
.message-avatar-online:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -7px 0 0 -26px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite;
}
@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .5}
    100% {opacity: 0;transform: scale(1)}
}

  • Result

online.gif
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu