JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<a href="http://henxed.ru/" class="cirHsmall">
		<div class="cmn-spinner__radar"></div>
		<span class="H">
            <span class="Hback"></span>
			<span class="Hx Ha"></span>
			<span class="Hx Hb"></span>
			<span class="Hx Hc"></span>
		</span> 
	 </a>

CSS

/* ============================================================
  ЕТА ДВИЖОК!!!111!!
============================================================ */
.cirHsmall > [class*="H"] {
    position: relative;
    top: -80px;
    left: 12px;
}

.cirHsmall > [class*="cmn-spinner"] {
  position: relative;
  width: 100px;
  height: 100px;
  color: rgba(0, 0, 0, 0);
  font-size: 0;
  text-indent: -99999px;
}

.cirH{height: 170px;}
.Hback {
    position: absolute;
    top: 11px;
    left: 22.5px;
    border: 2px solid #11794F;
    border-radius: 100%;
    padding: 15px;
    background-color: rgba(28, 125, 84, 0.35);
    box-shadow: 0px 0px 17px -4px #000;
}

.spinner-container {
  padding: 20px 0;
}
/* ============================================================
  Лого Henxed "H" на CSS
============================================================ */

.Hx {
    display: block;
    position: absolute;
    border-radius: 9px;
}
.Ha{
    top: 18px;
    left: 30px;
    width: 6px;
    height: 20px;
    background-color: #1EA067;
    box-shadow: 0 0 7px -2px rgb(0, 0, 0);
}

.Hb{
    top: 18px;
    left: 37px;
    width: 5px;
    height: 22px;
    background-color: #1EA067;
    transform: rotate(90deg);
    z-index: 1;
    box-shadow: 0 0 7px -2px rgb(0, 0, 0);
}

.Hc{
	top: 18px;
	left: 43px;
	width: 6px;
	height: 20px;
	background-color: #1EA067;
	box-shadow: 0 0 7px -2px rgb(0, 0, 0);
	}


/* ============================================================
  Делаем в стиле радара йопта
============================================================ */
.cmn-spinner__radar {
  border-top: solid 2px #4CCE96;
  border-right: solid 2px transparent;
  border-bottom: solid 2px transparent;
  border-left: solid 2px transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-animation: cmn-spinner--animation__radar 4s infinite linear;
  -moz-animation: cmn-spinner--animation__radar 4s infinite...