CSS Modify Loading Animation and Icons

1.1 Requirement

How to change the loading icon? Here we take the following example for demonstration:

1.2 Solution

Use CSS to change the default loading icon in GIF format.

2.1 File preparation

Unzip the  loader folder to the folder %FR_HOME%\webapps\webroot\help\css .

2.1.1 loader.css

The loader.css file located in the loader folder reads as follows:

.loading-local-indicator-pic {
    background: url('loader.gif');
    background-size: cover;
}
.loading-whole-indicator-pic {
    background: url('loader.gif');
    background-size: cover;
}

Note: Modify CSS codes to change the name or the path of loader.gif if necessary.

2.1.2 loader.js

The loader.js file located in the loader reads as follows:

FR.HtmlLoader.useCustomLoadingAnimation = function() {
    return true;
}

2.1.3 loader.gif

The effect of loader.js file located in the loader folder is shown as below:

2.2 Reference CSS and JavaScript

1）In the FineReport Designer, click [Server]-[Server Configuration]-[Reference Css], select [Disk File: loader.css] and click [Add], as shown below:

2）Click [Reference JavaScript], select [Disk File: loader.js] and click [Add], as shown below:

Note 1: Simply replace the loading icon loader.gif with a new one (clear your browser cache before preview）.

Note 2：The new icon size should not exceed 64*64, otherwise it will be displayed incompletely.

2.3 Preview

The preview effect on a PC is a loading icon in loader.gif format.

3.1 Template 

Modify loading animation and icon.frm

3.2 Css file and gif file

loader.zip

Refer to the original link: https://help.fanruan.com/finereport/doc-view-1901.html