JSFiddle - React, Tailwind, and code Playground
by Lloyd Atkinson
HTML
<div class="loadingio-spinner-radio-eb7z30esnvo"><div class="ldio-64igevlg26">
<div></div><div></div><div></div>
</div></div>
<style type="text/css">
@keyframes ldio-64igevlg26 {
0% { opacity: 0 }
20% { opacity: 1 }
100% { opacity: 1 }
}
.ldio-64igevlg26 div {
position: absolute;
animation: ldio-64igevlg26 1s linear infinite;
box-sizing: border-box!important;
}
.ldio-64igevlg26 div:nth-child(1) {
width: 44px;
height: 44px;
left: 34px;
top: 128px;
border-radius: 50%;
background: #c8102e;
}
.ldio-64igevlg26 div:nth-child(2) {
width: 66px;
height: 66px;
left: 56px;
top: 84px;
border-radius: 0 66px 0 0;
border: 20px solid #1b69b9;
background: none;
animation-delay: 0.1s;
border-bottom: 0;
border-left: 0
}
.ldio-64igevlg26 div:nth-child(3) {
width: 110px;
height: 110px;
left: 56px;
top: 40px;
border-radius: 0 110px 0 0;
border: 20px solid #24303b;
background: none;
animation-delay: 0.2s;
border-bottom: 0;
border-left: 0
}
.loadingio-spinner-radio-eb7z30esnvo {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
background: none;
}
.ldio-64igevlg26 {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-64igevlg26 div { box-sizing: content-box; }
/* generated by https://loading.io/ */
</style>
<div class="loadingio-spinner-radio-bep8lsmpnz"><div class="ldio-bgeyizw1ela">
<div></div><div></div><div></div>
</div></div>
<style type="text/css">
@keyframes ldio-bgeyizw1ela {
0% { opacity: 0 }
20% { opacity: 1 }
100% { opacity: 1 }
}
.ldio-bgeyizw1ela div {
position: absolute;
animation: ldio-bgeyizw1ela 1s linear infinite;
box-sizing: border-box!important;
}
.ldio-bgeyizw1ela div:nth-child(1) {
width: 22px;
height: 22px;
left: 17px;
top: 64px;
border-radius: 50%;
background: #c8102e;
}
.ldio-bgeyizw1ela div:nth-child(2) {
width:...