Animated online indicator

Tutrix

Many people are probably familiar with the fact that the online indicator is animated in some forums.
If you want to display this in Flarum as well, you can use this CSS code.

.UserCard-lastSeen.online .fa-circle,
.PostUser .UserOnline .fa-circle {
  animation:Flarum-Online-Circle 3s infinite;
}
.UserCard-lastSeen.online .fa-circle::after,
.PostUser .UserOnline .fa-circle::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
  --size: 10px;
  width: var(--size);
  height: var(--size);
  bottom:0;
  right:0;
  top:1px;
  left:1px;
  outline:2px solid var(--online-user-circle-color);
  transform:scale(1);
  animation:Flarum-Online-Dot 3s infinite;
}
@keyframes Flarum-Online-Circle {
  10% {
    transform:scale(.7);
  }
  30% {
    transform:scale(1);
  }
}
@keyframes Flarum-Online-Dot {
  10% {
    transform:scale(1);
    opacity:1;
  }
  50% {
    transform:scale(3);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:0;
  }
}

Works in posts, hovercards, profiles, and also in the member list.

peopleinside

Amazing, thank you for sharing! 💖

Forogramero

Thank you!! Great work!

vimo

Nice one... Thx

Silvestrus

Very nice! Thank you. Following. :-)

Tutrix

If you use the “Afrux Online Users Widget,” you can also add the animation to the widget. If you don't mind too much flashing 😀 , add the following CSS to the code provided above

.Afrux-OnlineUsersWidget-users-item::before {
  content: "\f111";
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position: absolute;
  color:var(--online-user-circle-color);
  font-size:8px;
  margin-left: -2px;
  margin-top: -5px;
  animation:Flarum-Online-Circle 3s infinite
}
.Afrux-OnlineUsersWidget-users-item::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
  --size:4px;
  width:var(--size);
  height:var(--size);
  margin-top:-1px;
  margin-left: -35px;
  outline:2px solid var(--online-user-circle-color);
  transform:scale(1);
  animation:Flarum-Online-Dot 3s infinite
}

Edit "Font Awesome" to the version you are using.

peopleinside

Hi, for who want a softer effect I share my CSS edit.
For profile page and post:

CSS Code:

/* Animated online indicator post and profile */

/* Online icon (fa-circle) */
.UserCard-lastSeen.online .fa-circle,
.PostUser .UserOnline .fa-circle {
  color: var(--online-user-circle-color);
  position: relative;
}

/* Pulse */
.UserCard-lastSeen.online .fa-circle::after,
.PostUser .UserOnline .fa-circle::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  background-color: var(--online-user-circle-color);
  box-shadow: 0 0 0 0 var(--online-user-circle-color);
  animation: Flarum-Online-Pulse 3s infinite ease-out;
}

/* Animate pulse */
@keyframes Flarum-Online-Pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 200, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);
  }
}

For Afrux online user:

CSS code:

/* Afrox online user list animation */

.Afrux-OnlineUsersWidget-users-item::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-left: -35px;
  border-radius: 50%;
  background-color: var(--online-user-circle-color);

  /* initial alone */
  box-shadow: 0 0 0 0 var(--online-user-circle-color);
  animation: Flarum-Online-Dot 3s infinite ease-out;
}

@keyframes Flarum-Online-Dot {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 200, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);
  }
}

Tutrix

peopleinside Hi, for who want a softer effect I share my CSS edit.

A Softy 😀
I'm happy that I could be the inspiration for your version.