JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<body bgcolor=#></body><center><div class="spinner" id="preloader"></div><script type="text/javascript">(function(){var preload = document.getElementById("preloader");var loading = 0;var id = setInterval(frame, 64);function frame(){if(loading == 100){clearInterval(id);} else {loading = loading + 1;if(loading == 90){preload.style.opacity = "0";}}}})();</script><style>.spinner {position: absolute;height: 2em;width: 2em;overflow: show;margin: auto;top: 0;left: 0;bottom: 0;right: 0;text-align: center; width: 40px; height: 40px; background-color: #653658; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }}@keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }}/style>