How to make $ionicLoading full screen?

I’m trying to create a splash screen to hide the content till the page is fully loaded but when I create a template for my $ I can’t make the template to show fullscreen. Is this possible without changing the .backdrop class?? (I intent to use different splash screens depending on the page the user is)

1 Like

You can assign a class to a view, then target the that view’s loader.


Exactly what I wanted! Thank you!!!

@mhartington your post is not working

Should be good now

1 Like

This is still work with just a minor change on Ionic 3.

.loading-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 100% !important;
    max-height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
1 Like

@sampath Thanks for your answer. It works for me