[RMMZ] [SOLVED] [How to] Change the default loader

[KenSoulslayer]

I have seen a few threads on how to replace/edit the default loader in RMV and else but no luck with RMZ.

I have found that this time it's CSS instead of a GIF or APNG, so basically what is the right way to replace that with an apng? or is that not ideal and I should code a custom CSS loader?

Spoiler: Default loader

SOLUTION: by @caethyril

Spoiler: solution

Put the animate image in your game folder (in this case we put it in img/system)

Locate and open game.css file in your "css" folder

Search and locate the following lines of code and do the following edits:

#loadingSpinnerImage {
margin: 0px;
padding: 0px;

/* Change the dimensions based your own image /*
width: 320px;
height: 228px;

/* Change the path below, wherever you put your own image /*
background-image: url('../img/system/loading.gif');
}

Feel free to mess around with the CSS more to get your own desired effect

 

[caethyril]

Correct, it's CSS:

Spoiler: loadingSpinner (game.css)

#loadingSpinner {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 120px;
    height: 120px;
    z-index: 10;
}
#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    border-radius: 50%;
    width: 96px;
    height: 96px;
    border: 12px solid rgba(255, 255, 255, 0.25);
    border-top: 12px solid rgba(255, 255, 255, 1);
    animation: fadein 2s ease, spin 1.5s linear infinite;
}

I'd suggest editing your project's game.css file (in your project's css subfolder). I'm not personally very knowledgable in that area, but you might find this page and its links helpful~

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML

developer.mozilla.org

 

[KenSoulslayer]

Correct, it's CSS:

Spoiler: loadingSpinner (game.css)

#loadingSpinner {[/INDENT]
[INDENT]    margin: auto;[/INDENT]
[INDENT]    position: absolute;[/INDENT]
[INDENT]    top: 0px;[/INDENT]
[INDENT]    left: 0px;[/INDENT]
[INDENT]    right: 0px;[/INDENT]
[INDENT]    bottom: 0px;[/INDENT]
[INDENT]    width: 120px;[/INDENT]
[INDENT]    height: 120px;[/INDENT]
[INDENT]    z-index: 10;[/INDENT]
[INDENT]}[/INDENT]
[INDENT]#loadingSpinnerImage {[/INDENT]
[INDENT]    margin: 0px;[/INDENT]
[INDENT]    padding: 0px;[/INDENT]
[INDENT]    border-radius: 50%;[/INDENT]
[INDENT]    width: 96px;[/INDENT]
[INDENT]    height: 96px;[/INDENT]
[INDENT]    border: 12px solid rgba(255, 255, 255, 0.25);[/INDENT]
[INDENT]    border-top: 12px solid rgba(255, 255, 255, 1);[/INDENT]
[INDENT]    animation: fadein 2s ease, spin 1.5s linear infinite;[/INDENT]
[INDENT]}

I'd suggest editing your project's game.css file (in your project's css subfolder). I'm not personally very knowledgable in that area, but you might find this page and its links helpful~

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML

developer.mozilla.org

Thanks for pointing out the file!

I am familiar with CSS and for my said case I prefer using a gif or apng file.

Considering the code has the section

#loadingSpinnerImage

and the css for thatt, there should be a place to add, specify/add "loadingSpinnerImage" to the game and then animate it with css or simply use an already animated one.

I will try putting it in the img/system folder and try.

 

[caethyril]

Yea, I'm guessing you could just replace the image's border-radius, fill, and animation stuff with an appropriate image property (background-image?) and use that to reference your custom image...hopefully that works with animated GIF/APNG, sounds like you know more than me.

Good luck!

 

[KenSoulslayer]

Yea, I'm guessing you could just replace the image's border-radius, fill, and animation stuff with an appropriate image property (background-image?) and use that to reference your custom image...hopefully that works with animated GIF/APNG, sounds like you know more than me.

Good luck!

I do know code but I am a complete beginner with RM so I will experiment and post here if I find anything for others

 

[caethyril]

Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:

#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    width: 320px;
    height: 228px;
    background-image: url('../img/system/loading.gif');
}

Remember to change the width/height to match your image~

 

[KenSoulslayer]

Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:

#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    width: 320px;
    height: 228px;
    background-image: url('../img/system/loading.gif');
}

Remember to change the width/height to match your image~

Added your solution to the main post for other's reference

 

[slimmmeiske2]

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.