调整角度材料中的圆形进度答案

【问题标题】：Resize circular progress in angular material调整角度材料中的圆形进度
【发布时间】：2015-07-31 09:25:43
【问题描述】：

我正在使用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'
        };
    });

【问题讨论】：

标签： javascript angularjs progress-bar material-design

【解决方案1】：

为md-diameter 设置较小的值是不够的。按钮更改其宽度和高度。所以这是我在Codepen 上的示例，用于在按钮中显示漂亮的微调器。

希望对你有帮助！

【讨论】：

您在 Codepen 上的示例未显示进度圈。您必须删除 CSS "margin-top: -32px;"它将显示在按钮的中心。

【解决方案2】：

如果其他人正在搜索这个：

您可以将md-diameter 添加到进度指令中。可以在here找到文档。

【讨论】：