Javascript 调整角度材质中的圆形进度
我正在使用为登录表单生成指令: 当用户单击login时,会出现一个指示,表示他现在正在登录。进度确实显示和隐藏正确,我的问题是它的大小。我希望它是旁边的登录文本在一个类似的大小。我曾尝试添加Javascript 调整角度材质中的圆形进度,javascript,angularjs,progress-bar,material-design,Javascript,Angularjs,Progress Bar,Material Design,我正在使用为登录表单生成指令: 当用户单击login时,会出现一个指示,表示他现在正在登录。进度确实显示和隐藏正确,我的问题是它的大小。我希望它是旁边的登录文本在一个类似的大小。我曾尝试添加style=“transform:scale(0.5)”或style=“width:20px”,但都没有影响其大小 如何调整进度,使其符合文本 模板 如果其他人正在搜索此项: 您可以将md diameter添加到progress指令中。可以找到文档。设置md直径的较小值是不够的。该按钮可更改其宽度和高度。下
style=“transform:scale(0.5)”
或style=“width:20px”
,但都没有影响其大小
如何调整进度,使其符合文本
模板
如果其他人正在搜索此项:
您可以将
md diameter
添加到progress指令中。可以找到文档。设置md直径的较小值是不够的。该按钮可更改其宽度和高度。下面是我的示例,显示按钮中的漂亮微调器
希望它能帮助你 您在Codepen上的示例没有显示进度循环。您必须删除CSS“边距顶部:-32px;”,它将显示在按钮的中心。
<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'
};
});