Ionic ion-spinner size?

Ionic Framework ionic-v3
1

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: http://ionicframework.com/docs/api/components/spinner/Spinner/

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!

Brian

2 Likes
2

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.

3

I never did find a solution :frowning:

4

Thanks for letting me know. Really appreciate the update.

5

in app.scss

// http://ionicframework.com/docs/theming/


// 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;
}
1 Like
6

You can use CSS like this:

ion-spinner {
    transform: scale(3);
}

But it will make you loose some resolution

3 Likes