JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

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

<div id="test">
    
</div>

<!-- main container -->
<div class="container">
    
    <div class="main">
        <div id="la-buttons" class="column">
            <button data-anim="la-anim-10">Corner indicator</button>
        </div>
        
    </div><!-- /main -->
</div><!-- /container -->

<script>
    var inProgress = false;
    
    Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
    var anim = el.getAttribute( 'data-anim' ),
    animEl = document.querySelector( '.' + anim );
    
    el.addEventListener( 'click', function() {
    if( inProgress ) return false;
    inProgress = true;
    classie.add( animEl, 'la-animate' );
    
    setTimeout( function() {
    classie.remove( animEl, 'la-animate' );
    
    inProgress = false;
    }, 6000 );
    } );
    } );
</script>

CSS

#test{
	width: 77px;
	height: 77px;
	background: white;
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
	cursor: pointer;
}

#test:after {
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
    content: url('http://i.stack.imgur.com/cYL3y.gif');
}

/* Effect 10: Corner indicator */
.la-anim-10 {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 300px;
	background: red;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-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);
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
}

/* Loading circle idea from http://codepen.io/Metty/details/lgJck */
.la-anim-10::before,
.la-anim-10::after {
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
	position: absolute;
	display: block;
    content: url('http://i.stack.imgur.com/cYL3y.gif');
}

.la-anim-10::before {
	margin-left: -40px;
	width: 80px;
	height: 80px;
	border-right-color: #bb344f;
	border-left-color: #bb344f;
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
	-webkit-animation: rotation 3s linear infinite;
	animation: rotation 3s linear infinite;
}

.la-anim-10::after {
	width: 77px;
	height: 77px;
	background-image: url('http://i.stack.imgur.com/cYL3y.gif');
	background-repeat: no-repeat;
    content: url('http://i.stack.imgur.com/cYL3y.gif');
}


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

@keyframes rotation {
	0% 		{ transform: rotate(0deg);...

JavaScript

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );