Animated online indicator (looks best on rounded avatars) 1.1

[zagorskey]

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:

.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...

 

[rdn]

WOW!
This would be great for my Drift Style

 

[zagorskey]

WOW!
This would be great for my Drift Style

I definitely agree.

 

[2TonWaffle]

How much of a load does it put on the CPU? Is it something that wouldn't bring anything down on a shared server?

 

[rdn]

Is it something that wouldn't bring anything down on a shared server?

No, The site visitor will suffer it I think

 

[Andy.N]

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

 

[Eagle]

Very nice. Thanks.

 

[zagorskey]

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.

 

[Andy.N]

Sure. Just wrap the keyframes animation in a CSS comment or simply delete those lines.

Great.
On mobile view, the dot is now shown however.

 

[Pinn]

Can you an Icon add? zb:

 

[zagorskey]

Can you an Icon add? zb: View attachment 79897

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

.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.

 

[rdn]

How about using FontAwesome?

 

[zagorskey]

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.

 

[TheBigK]

What if a transparent, animated gif is used?

 

[zagorskey]

What if a transparent, animated gif is used?

It's possible but the animation wouldn't be so smooth, it would require an additional http request and would look terrible when zoomed in on retina screens.

 

[rainmotorsports]

How much of a load does it put on the CPU? Is it something that wouldn't bring anything down on a shared server?

No, The site visitor will suffer it I think

Exactly thats what I came here to post actually was to suggest the notice be changed to say its the end user's cpu load that will increase.

 

[zagorskey]

Exactly thats what I came here to post actually was to suggest the notice be changed to say its the end user's cpu load that will increase.

Done.

 

[rainmotorsports]

Done.

Nice! More for your benefit. Less questions, more people willing to try your work when they fully understand.

 

[zagorskey]

Nice! More for your benefit. Less questions, more people willing to try your work when they fully understand.

I completely agree.

 

[Votick]

Can this be implemented on a 1.3 Install?