JSFiddle - React, Tailwind, and code Playground

Live Indicator CSS3 only.

by Andrew Pougher

HTML

<div class="panel panel-sm">
<div class="panel-body">
<div class="live_pulse component form-inline">
<div class="live_icon">
<div class="live_icon-inner"></div>
<div class="live_icon-middle"></div>
<div class="live_icon-outer"></div>
</div>
<span class="live_pulse__text">Live</span>
</div>
</div>
</div>

CSS

.live_pulse {
  display: inline-block;
  position: relative;
  color: rgba(34, 34, 34, 0.7)
}

.live_pulse:after {
  content: ' | ';
  color: #fff;
  opacity: .7
}

.live_icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.live_icon-inner,
.live_icon-middle,
.live_icon-outer {
  background: transparent;
  position: absolute;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.live_icon-inner {
  width: 6px;
  height: 6px;
  -webkit-animation: anim_inner 2s infinite;
  animation: anim_inner 2s infinite;
  background: rgba(34, 34, 34, 0.7);
  left: 8px;
  top: 8px
}

.live_icon-middle {
  width: 14px;
  height: 14px;
  -webkit-animation: animationMiddle 2s infinite;
  animation: animationMiddle 2s infinite;
  border: 1px solid rgba(34, 34, 34, 0.7);
  left: 4px;
  top: 4px
}

.live_icon-outer {
  width: 22px;
  height: 22px;
  -webkit-animation: animationOuter 2s infinite;
  animation: animationOuter 2s infinite;
  border: 1px solid rgba(34, 34, 34, 0.7);
  left: 0;
  top: 0
}

.component.headline .live_icon {
  left: 0;
  margin-top: 0;
  position: relative;
  top: 12px
}

@-webkit-keyframes anim_sm{0%{-webkit-transform:scale(1);transform:scale(1)}
10%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(0.5);transform:scale(0.5)}
90%{-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes...