如何缩放 MDL 微调器？

Question

有什么方法可以缩放 MDL 微调器吗？我试图改变它的 widht 和 height 属性，但它变薄了。看看：

CSS

width: 150px; 
height: 150px

结果

Answer 1

找到了。

您需要设置新属性。

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。

Answer 2

我不得不使用 !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>

如何缩放 MDL 微调器？

How to scale MDL spinner?

css

material-design-lite