How to scale MDL spinner?

Question

It there any way to scale MDL spinner? I tried to change it's widht and height properties, but it becomes thiner. Take a look:

CSS

width: 150px; 
height: 150px

Result

The borders are fixed, so naturally, they would look "thinner" if the container is bigger. You can change the `border-width` value for `.mdl-spinner__circle` which is `3px` by default, If I'm not wrong. — Aziz, Feb 23 '16 at 11:23

score 10 · Accepted Answer · answered Feb 23 '16 at 11:25

Found it.

You need to set new properties.

CSS

.mdl-spinner {
  width: 28px;
  height: 28px;
}

.mdl-spinner__circle {
  border-width: 3px;
}

And change them in proportion 28/3. Let's say, if you want to make it 3 times bigger, your code will look like:

CSS

.mdl-spinner {
  width: 84px;
  height: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

Be careful! It does affect on your FPS if scaled more than in 10 times.

score -1 · Answer 2 · answered Jan 23 '17 at 03:24

I had to use !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>

It's totally a problem of code snippets. You won't get it in a local environment you override styles after including MDL stylesheet. Works fine on CodePen without `!important` https://codepen.io/dukeimg/pen/OmWzdG — Viktor, Apr 27 '17 at 09:00

How to scale MDL spinner?

2 Answers2