Ionic ion-spinner size?


Has anyone had issues with making the ion-spinner svg’s larger? I have tried all sorts of css, including the suggestions in the ionic docs here:

It looks like ionic may have changed the svg loaders to use absolute positioning (in pixel units) which does not seem to like the css width/height attributes.

Thanks for the help!



I am having the same issue. Did you ever find a way to solve this?

For me, adjusting the width and height only increases the size of the circle elements, but does not seem to impact the viewbox.


I never did find a solution :frowning:


Thanks for letting me know. Really appreciate the update.


in app.scss


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

ion-spinner {
    width: 40px !important;
    height: 40px !important;

Is that what you’re referring to?

This has an effect as well

ion-spinner > svg {
    width: 80px !important;
    height: 80px !important;

If you’re using loading controller, you can modify with

.loading-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 !important;
    max-height: 100% !important;
    max-width: 100% !important;
    justify-content: center;


You can use CSS like this:

ion-spinner {
    transform: scale(3);

But it will make you loose some resolution