Animated online indicator
____________________________________
A simple animation on the online member indicator
____________________________________
A simple animation on the online member indicator
- In
extra.lesstemplate, 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
