JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="http://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MainController">
        <button ng-click="demoLogin()" class="btn-wide">
            {{btnText}}<span class="myIcon" ng-show="transfering"></span>
        </button>
    </div>
</div>

CSS

.btn-wide{
    width:400px;
    height:60px;
    font-size:32px;
    
}
.myIcon{
    display:inline-block;
    width:33px;
    height:33px;
    margin-left:10px;
    background-color:#f00;
    vertical-align:middle;
}

JavaScript

var myApp = angular.module('MyApp', []);
myApp.controller("MainController", function($scope){
    $scope.btnText = "Login";
    $scope.transfering = false;
    $scope.demoLogin = function(){
        //When toggle this button, text will move left so that make sure text and icon is in center
        $scope.transfering = !$scope.transfering;
    };
});