JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="loader">
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="SkeCdDvcf" x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200" enable-background="new 0 0 400 200">
    <style type="text/css">
        @-webkit-keyframes BJ3eAdDP9f_Animation{0%{opacity: 1;}16.25%{opacity: 1;}16.67%{opacity: 0;}100%{opacity: 0;}}@keyframes BJ3eAdDP9f_Animation{0%{opacity: 1;}16.25%{opacity: 1;}16.67%{opacity: 0;}100%{opacity: 0;}}@-webkit-keyframes BJVgR_vDcM_BJudCFwcz_Animation{0%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}21.25%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}27.50%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}33.75%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}56.25%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}62.50%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}67.50%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}73.75%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}78.75%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}85%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}100%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}}@keyframes BJVgR_vDcM_BJudCFwcz_Animation{0%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}21.25%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}27.50%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}33.75%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}56.25%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}62.50%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}67.50%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}73.75%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}78.75%{-webkit-transform: scale(0.8, 0.8);transform: scale(0.8, 0.8);}85%{-webkit-transform: scale(1, 1);transform: scale(1, 1);}100%{-webkit-transform: scale(1, 1);transform: scale(1,...

CSS

.loader {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a72453+0,79367f+63,79367f+100 */
background: #a72453; /* Old browsers */
background: -moz-linear-gradient(top, #a72453 0%, #79367f 63%, #79367f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a72453 0%,#79367f 63%,#79367f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a72453 0%,#79367f 63%,#79367f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a72453', endColorstr='#79367f',GradientType=0 ); /* IE6-9 */;
}

.icon {
 position: absolute;
 top: 50%;
 transform: translatey(-50%);
 display: block;
 text-align: center;
 width: 100%;
}

#BJ3eAdDP9f path {
fill: #fff;
}