我使用Angular Material为登录表单构建指令:
当用户点击登录时,circular progress似乎表明他现在正在登录。进度确实显示和隐藏,我的问题是它的大小。我希望它在相似大小的登录文本旁边。我尝试添加style="transform: scale(0.5)"
或style="width: 20px"
,但都没有影响其大小。
如何调整进度,以使其适合文本?
<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>
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'
};
});