Animated online indicator (looks best on rounded avatars) 1.1

Animated online indicator (looks best on rounded avatars) 1.1

zagorskey

Active member
zagorskey submitted a new resource:

[1.4] Animated online indicator (looks best on rounded avatars) - Some nice pulsating CSS3 animation

You don't fancy the standard online indicator? Then try this quick modification, CSS only, no images needed:

Add this to EXTRA.css:

Code:
.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */  
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}
           
.messageUserBlock div.avatarHolder .onlineMarker:before
{...

Read more about this resource...
 
How much of a load does it put on the CPU? Is it something that wouldn't bring anything down on a shared server?
 
The page tab varies 7%-12% on a quad core CPU which is acceptable. You can experiment with -webkit-transform: translateZ(0) which would fool the browser into using the GPU as well when rendering.

Really nice. Can it be done to remove the animation, just keep the CSS.

Sure. Just wrap the keyframes animation in a CSS comment or simply delete those lines.
 
Can you an Icon add? zb: View attachment 79897

Use this for .messageUserBlock div.avatarHolder .onlineMarker:before

Code:
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '✔';
    color:#fff;
    font-size:10px;
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background:-webkit-linear-gradient(#75c088 0%,#098128 100%);
    background:linear-gradient(#75c088 0%,#098128 100%);
    border-color: #7fb900;
    border-radius: 50%
}

You can experiment a bit to achieve the most suitable effect for your needs.
 
I usually avoid using FontAwesome and build a custom icon font with Fontello instead. That way one can take advantage of a .woff with a smaller size and no unnecessary icons that they'd never use. :)
 
  • Like
Reactions: rdn
Back
Top Bottom