Animated online indicator

Animated online indicator 2022-05-21

Register or Log in for Free Download
XF Compatibility
  1. 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 😉

  • 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)}
}
Author
axtona
Views
640
First release
Last update
Ratings 0.00 star(s) 0 ratings
Link was Broken? Send message to the Website Team and we will assist you quickly!
Support Developer If you are satisfied with the test or your project has earned you money, Click the More Information button to support the developer by purchasing.

More resources from axtona

Cool Timeline Pro - WordPress Timeline Plugin A
an advanced WordPress timeline plugin that showcases your life history timeline
Advanced User Profile Statistics A
introduces a highly detailed analytics dashboard into user profiles as a profile tab.
[DigitalPoint] App for Cloudflare A
Everything is available from within XenForo
Back
Top