JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<!-- Divisions for loading effects -->
<div class="la-anim-10 la-animate"></div>

CSS

/* Effect 10: Corner indicator */
.la-anim-10 {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: rgb(255,255,255); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background:#006497;
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    pointer-events: none;
}

.la-anim-10.la-animate {
    -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
    transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.la-anim-10::before {
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    /*border-right-color: #bb344f;
    border-left-color: #bb344f;*/
    background: url('http://leongaban.com/_stack/after/img/loader-logo.png') no-repeat center;
    border:none;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;
}


@-webkit-keyframes rotation {
	0% 		{ -webkit-transform: rotate(0deg); }
	50% 	{ -webkit-transform: rotate(180deg); }
	100% 	{ -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
	0% 		{ transform: rotate(0deg); }
	50% 	{ transform: rotate(180deg); }
	100% 	{ transform: rotate(360deg); }
}