⚫ Live Indicator using simple CSS

Today we are going to look at a simple but amazing trick that can be achieved by a few lines of code. We will follow simple steps to create step by step live indicator with a blinking effect. To achieve these you just need basic CSS and HTML knowledge.

Steps:
1. Adding HTML
Nothing fancy here we just need a placeholder to hold our text as well as our blinking circle so we will implement it using divs and spans.

<div class="live-indicator-holder">
 <span class="indicator">
 <div class="circle blink" aria-hidden="true"></div>Live
 </span>
</div>

Man Performing Live on Stage — Pexels.com

2. Creating a circle using CSS
The next part is the heart of our code i.e. a circle. We will declare a height and width for a circle div along with a border radius which is 50% to form a circle.

body{
  background: #000;
}
.circle {
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

3. Adding basic CSS
Once our circle is ready we will add some additional CSS to format our LIVE text as well as position our indicator. The CSS will include centring the text and adding colour.

.live-indicator-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.live-indicator-holder .indicator {
  font-family: sans-serif;
  background: #ea2429;
  color: #FFF;
  padding: 6px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
}

4. Add 3D effect + Plus additional styles
The real fun begins here which will implement a blinker effect we will be adding a blinker effect with special CSS property called cubic-bezier. Also, we need to control the opacity to form a

.live-indicator-holder .indicator .blink {
  animation: blinker 1.2s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker {
  from {
    opacity: 0.9;
  }
to {
    opacity: 0.1;
  }
}

Thank you for reading my article, please let me know about any improvements in the comments.