JSFiddle - React, Tailwind, and code Playground

by tryzor

HTML

<div class="button loading">Loading</div>

CSS

.button {
	display: block;
	width: 150px;
	height: 30px;
	background-image: url("http://s1.directupload.net/images/130503/xo29uiim.png");
	color: white;
	font-family: sans-serif;
	text-align: center;
	line-height: 30px;
	background-position: 0 0;
}

.loading {
	-webkit-animation: loading 4s infinite linear;
	-moz-animation: loading 4s infinite linear;
	-ms-animation: loading 4s infinite linear;
	-o-animation: loading 4s infinite linear;
	animation: loading 4s infinite linear;
}

@keyframes "loading" {
 0% {
    background-position: 0 0;
 }
 100% {
    background-position: -100% 0;
 }

}

@-moz-keyframes loading {
 0% {
   background-position: 0 0;
 }
 100% {
   background-position: -100% 0;
 }

}

@-webkit-keyframes "loading" {
 0% {
   background-position: 0 0;
 }
 100% {
   background-position: -100% 0;
 }

}

@-ms-keyframes "loading" {
 0% {
   background-position: 0 0;
 }
 100% {
   background-position: -100% 0;
 }

}

@-o-keyframes "loading" {
 0% {
   background-position: 0 0;
 }
 100% {
   background-position: -100% 0;
 }

}