JSFiddle - React, Tailwind, and code Playground

by Jérôme Sengel

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg id="livechat" viewBox="0 0 41 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <title>LC_with_dots</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="SVG-ICON" transform="translate(-62.000000, -44.000000)">
            <g id="Live_Chat_icon" transform="translate(63.000000, 45.000000)">
                <g id="LC_with_dots">
                    <path class="dots dot1" d="M10.2627474,10.5 C10.2627474,11.604 9.34316842,12.5 8.21011579,12.5 C7.07706316,12.5 6.15748421,11.604 6.15748421,10.5 C6.15748421,9.396 7.07706316,8.5 8.21011579,8.5 C9.34316842,8.5 10.2627474,9.396 10.2627474,10.5" id="Fill-1" fill="#000000"></path>
                    <path class="dots dot2" d="M17.4469579,10.5 C17.4469579,11.604 16.5273789,12.5 15.3943263,12.5 C14.2612737,12.5 13.3416947,11.604 13.3416947,10.5 C13.3416947,9.396 14.2612737,8.5 15.3943263,8.5 C16.5273789,8.5 17.4469579,9.396 17.4469579,10.5" id="Fill-3" fill="#000000"></path>
                    <path class="dots dot3" d="M24.6311684,10.5 C24.6311684,11.604 23.7115895,12.5 22.5785368,12.5 C21.4454842,12.5 20.5259053,11.604 20.5259053,10.5 C20.5259053,9.396 21.4454842,8.5 22.5785368,8.5 C23.7115895,8.5 24.6311684,9.396 24.6311684,10.5" id="Fill-5" fill="#000000"></path>
                    <path d="M6.90915789,20 C3.10768421,20 0,16.97 0,13.268 L0,6.732 C0,3.03 3.10768421,0 6.90915789,0 L23.8803158,0 C27.6797368,0 30.7894737,3.03 30.7894737,6.732 L30.7894737,13.268 C30.7894737,16.97 27.6797368,20 23.8803158,20 L14.3684211,20 L6.90915789,26 L6.90915789,20" id="Stroke-7" stroke="#000000" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M13.6364526,24.6006 C14.8023474,25.4766 16.2617684,26.0006...

CSS

#livechat {
  width: 200px;
}

.dots {
  transform-origin: center;
  transform: scale(1);
}

.dots.dot1{
  animation: load 1s infinite;
}

.dots.dot2{
  animation: load 1s infinite;
  animation-delay: 0.2s;
}

.dots.dot3{
  animation: load 1s infinite;
  animation-delay: 0.4s;
}

#Stroke-7 {
  
}

@keyframes load{
  0%{
    transform: scale(1);
    fill: black;
  }
  50%{
    transform: scale(0.9);
    fill: grey;
  }
  100%{
    transform: scale(1);
    fill: black;
  }
}