Animated online indicator

Animated online indicator 2022-05-21

No permission to download
XF Compatibility
  1. 2.2.x
Short Description
Animated online indicator
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
533
First release
Last update
Ratings 0.00 star(s) 0 ratings
Link was Broken? Please 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
Brazilian Language [PT-BR] A
Like the other available Brazilian Portuguese translation
SEO Audit A
SEO Audit 1.1.0
A comprehensive SEO auditing dashboard for XenForo administrators.
Top