• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Animated online indicator (looks best on rounded avatars) 1.1

Animated online indicator (looks best on rounded avatars) 1.1

zagorskey

Active member
#1
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...
 

zagorskey

Active member
#8
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.
 

zagorskey

Active member
#11
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.
 

zagorskey

Active member
#13
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. :)