I am using Angular Material to build a directive for a login form:

When ever the user clicks login, a circular progress appears to indicate, that he is now being logged in. The progress does show and hide correctly, my problem is its size. I want it to be next to the login text at a similar size. I have tried to add style="transform: scale(0.5)" or style="width: 20px", but neither affected its size.

How can I resize the progress, so it fits the text?

Template

<form name="loginForm" ng-submit="loginCtrl.login()">
    <md-input-container flex>
        <label for="usr">Username</label>
        <input type="text" ng-disabled="login.loading" name="usr" id="usr" maxlength="50" ng-model="login.user" required />
    </md-input-container>
    <md-input-container flex>
        <label for="pwd">Password</label>
        <input type="password" ng-disabled="login.loading" name="pwd" id="pwd" ng-model="login.password" required />
    </md-input-container>
    <md-button class="md-raised md-primary" ng-disabled="loginForm.$invalid || login.loading" type="submit">
        Login
        <md-progress-circular md-mode="indeterminate" ng-show="login.loading" class="md-accent">
    </md-progress-circular></md-button>
</form>

Directive

angular
    .module('app')
    .controller('LoginCtrl', ['$scope', 'AuthService', '$log', function ($scope, AuthService, $log) {
        $scope.login = {
            loading: false,
            password: '',
            user: ''
        };

        this.login = function () {
            $scope.login.loading = true;

            // Do the login, this might take longer
            AuthService.login($scope.login.user, $scope.login.password, function (data) {
                $scope.login.loading = false;

                if(data.success) {                  
                    $log.debug('login successful');
                }
                else {
                    $log.debug('login failed');
                }
            });
        };
    }])
    .directive('loginForm', function () {
        return {
            restrict: 'EA',
            scope: {},
            controller: 'LoginCtrl',
            controllerAs: 'loginCtrl',
            templateUrl: '/templates/directives/loginForm.html'
        };
    });

I am using Angular Material to build a directive for a login form:

When ever the user clicks login, a circular progress appears to indicate, that he is now being logged in. The progress does show and hide correctly, my problem is its size. I want it to be next to the login text at a similar size. I have tried to add style="transform: scale(0.5)" or style="width: 20px", but neither affected its size.

How can I resize the progress, so it fits the text?

Template

<form name="loginForm" ng-submit="loginCtrl.login()">
    <md-input-container flex>
        <label for="usr">Username</label>
        <input type="text" ng-disabled="login.loading" name="usr" id="usr" maxlength="50" ng-model="login.user" required />
    </md-input-container>
    <md-input-container flex>
        <label for="pwd">Password</label>
        <input type="password" ng-disabled="login.loading" name="pwd" id="pwd" ng-model="login.password" required />
    </md-input-container>
    <md-button class="md-raised md-primary" ng-disabled="loginForm.$invalid || login.loading" type="submit">
        Login
        <md-progress-circular md-mode="indeterminate" ng-show="login.loading" class="md-accent">
    </md-progress-circular></md-button>
</form>

Directive

angular
    .module('app')
    .controller('LoginCtrl', ['$scope', 'AuthService', '$log', function ($scope, AuthService, $log) {
        $scope.login = {
            loading: false,
            password: '',
            user: ''
        };

        this.login = function () {
            $scope.login.loading = true;

            // Do the login, this might take longer
            AuthService.login($scope.login.user, $scope.login.password, function (data) {
                $scope.login.loading = false;

                if(data.success) {                  
                    $log.debug('login successful');
                }
                else {
                    $log.debug('login failed');
                }
            });
        };
    }])
    .directive('loginForm', function () {
        return {
            restrict: 'EA',
            scope: {},
            controller: 'LoginCtrl',
            controllerAs: 'loginCtrl',
            templateUrl: '/templates/directives/loginForm.html'
        };
    });

• javascript
• angularjs
• progress-bar
• material-design

2 Answers 2

Setting the smaller value for md-diameter is not enough. The button changes its width and height. So here is my example on Codepen to show nice spinner in the button.

Hope it helps you!

In case anyone else is searching for this:

You can add md-diameter to the progress directive. The documentation can be found here.