Loading Animation

The Loading Animation settings allow you to specify an alternate animation image, position, and size for the loading animation. The loading animation appears briefly every time a new screen is rendered while the application is being used. In Profound UI Version 5, Fix Pack 8.0 and prior, the default animation is a spinning circle that appears in the top-left corner. Starting with Profound UI Version 5, Fix Pack 9.0 and later, the default animation is two semicircles spinning in the top-left corner and is created with CSS.

The CSS animations are set by CSS classes found in ProfoundUI.css or in the CSS file of the Genie Skin.

The default CSS class for Rich Display's is pui-animation. For Genie Skins, the CSS class would be 'pui-SKINNAME-animation', ie the Hybrid class is called pui-hybrid-animation.

If you wish the modify these animations, you can create a separate CSS file that will overwrite the rules. To have this file be automatically loaded in your sessions:

For Rich Display sessions place it in the following location in the IFS, /www/INSTANCE-NAME/htdocs/profoundui/userdata/custom/css/.
For Genie sessions running under a skin, add a <link> tag to load it in the Genie skin's start.html file. For example:
- for the Hybrid skin, the file to modify would be /www/INSTANCE-NAME/htdocs/profoundui/userdata/genie skins/Hybrid/start.html
- The custom CSS file, e.g. "custom.css", can be loaded in the Genie session by adding a <link> tag that points to the .css file; add the link inside the <head> tag : <link href="/profoundui/userdata/custom/css/custom.css" rel="stylesheet" type="text/css">.

In addition, you can create your own CSS animation and set the following config option to use that class:

pui["loading animation"]["css"] = 'my-new-animation'; // This will change the animation to use the my-new-animation CSS class

If you wish to disable the CSS animation entirely and use the old animation format, you can set the following config option:

// To disable the CSS animation and use the legacy animation, you can set this property:
pui["loading animation"]["css"] = null;

The default value of pui["loading animation"]["css"] is 'pui-animation' (Profound UI Version 5, Fix Pack 9.0 and later).

Example CSS for changing the default animation:

some-file-in-userdata-custom-css.css

.pui-animation {
  top: 300px;
  left: 300px;
}

Example for using another CSS class for the animation:

some-custom-javascript-file.js

pui["loading animation"]["css"] = 'my-animation-class';

some-custom-file.css

.my-animation-class {
  position: fixed;
  display: block;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  z-index: 1001;
}

Text instead of Animation:

Instead of showing an animation it is possible to display a text message while the screen loads:

pui["loading animation"]["text"] = "One moment...";
pui["loading animation"]["left"] = 100;
pui["loading animation"]["top"] = 100;
pui["loading animation"]["zIndex"] = 250;

Legacy Animation:

some-custom-javascript-file.js

//As of Profound UI Version 5 Fix Pack 9.0, this line is necessary for using the legacy animation
pui["loading animation"]["css"] = null;

// The legacy animation can be changed using any of the following settings. Below are the defaults.
pui["loading animation"]["path"] = "/profoundui/proddata/images/loading.gif";
pui["loading animation"]["left"] = 10;
pui["loading animation"]["top"] = 10;
pui["loading animation"]["width"] = 16;
pui["loading animation"]["height"] = 16;
pui["loading animation"]["zIndex"] = 250;
pui["loading animation"]["alt"] = "Loading...";

Where do you save this configuration option? Here.

Note: the alt option is available with Profound UI Version 5, Fix Pack 4.1 and later. The CSS option is available with Profound UI Versions 5, Fix Pack 9.0 and later.