There are 2 images that are needed to replace the online indicator (little green light), with animated images. The smaller image without the text is needed for the Profile Pages and the Main Member page.
Replace this image:

With this image for Home Page (must have large thumbs selected to see indicator):

And this image for main Member Page and Profile Pages:

Add this code to your Manage/Appearance/Advanced CSS:
/* Home Page Online Indicator Replacement */
.module_members .online {
background:url("http://storage.ning.com/topology/rest/1.0/file/get/8330217?profile=original")
no-repeat scroll 3px 50% transparent!important;}

/* Member Page Online Indicator Replacement - - smaller image */
div.member_item .online {
background:url("http://storage.ning.com/topology/rest/1.0/file/get/964769758?profile=original")
no-repeat scroll 0px 50% transparent; width:20px;height:20px;}

/* Profile Pages Online Indicator Replacement - - smaller image */
div.xg_widget_profiles_profile .online {
background:url("http://storage.ning.com/topology/rest/1.0/file/get/964769758?profile=original")
no-repeat scroll 0px 50% transparent!important; width:20px;height:20px;}

Important Note:
Since I uploaded these images via a blog on my Ning, your safest bet is
to upload the images on your Ning, re-upload via a blog, and change the 2
image paths in the CSS. The first line of CSS is for home page and uses
the image called: onlinenow.gif
The other 2 lines of CSS are for the member page and profile pages, and
uses the image called: onlinenow_small.gif. I have uploaded both
images.


For the smaller version I created this fading on/off star. Feel free to use it.

And, here are 2 more I created:

Just right-click on any of these images, and save to your hard drive. Then, upload via a Blog or comment, from your site. Copy paste the image URL to the CSS. For all of these you may have to add height and width. For example for the 2nd one, you would need width:45px!important;

Have fun,
Jen