找到了。
你需要设置新的属性。
CSS
.mdl-spinner {
width: 28px;
height: 28px;
}
.mdl-spinner__circle {
border-width: 3px;
}
按照比例28/3改变它们的大小。例如,如果你想让它变大3倍,你的代码将如下所示:
CSS
.mdl-spinner {
width: 84px;
height: 84px;
}
.mdl-spinner__circle {
border-width: 9px;
}
小心!如果放大超过10倍,它会影响你的FPS。
我不得不使用!important
。
.mdl-spinner {
width: 64px !important;
height: 64px !important;
}
.mdl-spinner__circle {
border-width: 6px !important;
}
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</body>
</html>
!important
可以正常工作:https://codepen.io/dukeimg/pen/OmWzdG - Viktor
transform: scale(1.5);
例如? - Aziz3px
的.mdl-spinner__circle
的border-width
值。如果我没记错的话。 - Aziz