- XF Compatibility
- 2.2.x
- Short Description
- A simple animated online member indicator added to your project with ease using extra.less. Enhance user experience with smooth, scalable animations.
Animated online indicator
____________________________________
A simple animation on the online member 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)}
}
