Change loading animation

[CyberGigi]

Hello everyone!
I’m new to SuiteCRM.

I’m trying to change the loading animation. I’m referring to the one with the SuiteCRM logo and the moving cubes (look at the attached image).

I’m not sure if this is an animated gif.

Anyway, is it possible to replace this animation with a custom gif?
Thank you all!

[rsp]

I think that it is possible to do. First, check gif name by doing inspect element on the browser or else find gif in the theme folder.

Once you find a gif that you want to update and if you’re using a SuiteP theme. Create folder and file like below.

For example,

/custom/themes/SuiteP/images/YOUR_GIF_FILE

You need to delete /cache/themes folder after you changes
Then do ‘empty cache and hard reload’ on the browser to see changes

Let me know, if it worked for you or not.

[CyberGigi]

Hello!
I’m using suite8 theme.

Unfortunately, I can’t find any gif file like that.

The folder path is public/legacy/custom/themes, inside i can find only the default folder.

Thank you.

[rsp]

Do you have images folder under default?

[CyberGigi]

Yes, but I can’t find that animation to replace the file.

[Daman]

I don’t believe this is just an image you can replace, is a dynamically made cube by the looks of it and I think to change it you would need to override the angular component core/app/core/src/lib/components/loading-spinner

[sadiq-soomro]

Hi @CyberGigi ,
I am not sure if you still need the solution. I managed to modify in version 8.8 but it should be similar in all suite8 versions.

First of all, you need to install the development tools as per your suitecrm version.

Compatibility Matrix

Follow above document to setup node, yarn and angular cli version as per your suitecrm version.

Assuming you have setup frontend development tools correctly,
Go to path: /core/app/core/src/lib/components/full-page-spinner

Modify the .css and .html files as per your requirement.

For example: .html

<div class="app-overlay">
    <div id="overlay-spinner">
        <div class="spinner"></div>
        <div class="loading-text"></div>
    </div>
</div>

.css file

.app-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: visible; /* Ensure visibility */
    opacity: 1; /* Ensure opacity */
}

#overlay-spinner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 80px; /* Make spinner bigger */
    height: 80px; /* Make spinner bigger */
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-top: 8px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px; /* Space between spinner and text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 20px;
    font-weight: bold;
    color: #3498db;
}

@keyframes dots {
    0%, 20% { content: "Loading"; }
    40% { content: "Loading."; }
    60% { content: "Loading.."; }
    80%, 100% { content: "Loading..."; }
}

.loading-text::after {
    content: "Loading";
    animation: dots 2s steps(4, end) infinite;
}

run the command yarn build and output should look like this: