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

Status
Not open for further replies.

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
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?

1607078702491.png


SOLUTION: by @caethyril

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:

CSS:
#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
 
Last edited:

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,219
Reaction score
1,628
First Language
EN
Primarily Uses
RMMZ
:kaopride: Correct, it's CSS:
Code:
#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~
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
:kaopride: Correct, it's CSS:
Code:
#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~
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
Code:
#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. :kaophew:
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,219
Reaction score
1,628
First Language
EN
Primarily Uses
RMMZ
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. :kaoslp:

Good luck! :kaojoy:
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
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. :kaoslp:

Good luck! :kaojoy:
I do know code :kaopride: but I am a complete beginner with RM :kaoswt:so I will experiment and post here if I find anything for others
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,219
Reaction score
1,628
First Language
EN
Primarily Uses
RMMZ
Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:
Code:
#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~ :kaophew:
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:
Code:
#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~ :kaophew:
:kaopride:Added your solution to the main post for other's reference:kaothx:
 
Last edited:

slimmmeiske2

Little Red Riding Hood
Global Mod
Joined
Sep 6, 2012
Messages
8,010
Reaction score
5,317
First Language
Dutch
Primarily Uses
RMXP

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.

 
Status
Not open for further replies.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Oh wow, just got word the police are looking for an armed suspect within a 2 block radius of my office. Super glad I'm not there right now. :kaoswt:
Sheila Nagase

same caption as before. :3
"Be as honest as you possibly can as often as you can. It makes your lies much easier to believe."
Each new game means new ways to survive and you need to adapt when you have 10 different stores with lots of items for your adventure

Forum statistics

Threads
107,376
Messages
1,029,211
Members
139,473
Latest member
Astrina
Top