JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<p class="ajax-loader-button">load</p>

CSS

.ajax-loader-button {
	border: 1px solid #b2b2b2;
	border-bottom-width: 2px;
	color: #818181;
	cursor: pointer;
	line-height: 19px;
	margin-bottom: 2.083em;
	padding: 2.083em 0;
	text-align: center;
}

.ajax-loader-button:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATCAYAAACZZ43PAAACy0lEQVQ4T3VUzUsbURCfTdbsblabTdYv1lTTNmq82IOnViwYilSpaFAU9KBnL+LH3+EhHmLipcdiL4K5tFAvlhaPwWJLRYTkYGwTEt0QNR+7ffPMppuEPlh29u3M783M7zeP0XXdwjCMBqZF9hj8JPvEfLDJQr+y4Vb1QQMdzQBmO/AxoIdGQtAhdLQSv3S9n4H+v3iAMOguzgXB4SAsehdbiaNKgApGQAMAyciGDpUUm5kIc2M4T/ZMws7IDih2xWqU3QAQV+N68HsQDuIHoOkanF2f1WTn5Jyw9WILlvuWsSfVBgE5Udr9uZtZ/boKt6VbGtTd3A3xXLwGoF1oh+3hbZh7OsfRRpNAK75Dp6HiypcV6jzzZAY2BjfAZ/NJrg+urIEw/2yeBrfxbY/IXo4ShSdfqBeZgb0BuC/f0/TWB9f/lUaaSBgAZCLgCeBhuJA6yhwFIGlnsO4pzxTsj+3X0LXweUEPvgyCzMsiCco30EgABO97b/785hwO3x7CqDLKmWki/9mKiKrUmUEwA5bdZYtlvQyJiYTd7XYXUHEVGnliP3TUtLBvhiopgOOdo1jSShB7FeO9Xi/SQ4PMjkb8nr5nHS+NJ9U/ao+iKHkEYPxRv3b8+xiib6JYgosAZOpPrQDaVFVtKTQVUmKTCLyVtyKAHPkRSa19W4OJ7gkIvw47ZEam6jPPCSqUbN1f3V4By7AggtjD83yC0pVMJsWxo7Ec/tx8vgmzg7OCBzzYPJy+IjaRPC2X+cvUXfkOJJsERJFOkmm2yvdJ+kSf/jQNrIUFv+KHpb4l8Ek+kDjJksgltGQ+SebZAjhY6V9p29DQUKleyuxp5rSIUs4Vc6CICnSJXTg49Om0d9J3r6MXOCtH54AKqY4eKZvNwtH1USaWjkFBK+A9AP1SP81GtsiPBUFACV+blYi14u1TqjSOfptWs8lGjdSo8S9n4zQg54znZgAAAABJRU5ErkJggg==);
    background-position: 0 0;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 19px;
    margin-right: .5em;
    vertical-align: middle;
    width: 16px;
}

.ajax-loader-button:before {
    -webkit-animation : rotate 1s infinite ease;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}