Left Menu Right Menu
May 11, 2020

Get It/View It Loading Spinner


Tamara Marnell (Central Oregon Community College)

Code Repository



Add a loading GIF to the Get It and View It windows of Primo full results.

Image of OTB Spinner

Image of Get It box

System Components

PBO Customization Manager, Alma Mashup Skin

Skillset Requirements



Not tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari.

Mobile Support

Tested on Android and iPhone.



1. Create an animated loading GIF that fits your institutional theme. One free website that allows
you to customize and download spinners is https://loading.io/
a. GIFs should be a maximum of 50 pixels tall. An image too big might not be covered by
the mashup iframe in some records.

Image of spinner behind View It tab

2. Place your GIF in the “img” directory of your customization package.

3. In your custom1.css file, add the following ruleset, replacing the placeholders with the values for
your VID, filename, and image height.

/* Add loading spinner to mashup parent */
prm-alma-mashup {
  background-image: url(/primo-explore/custom/[VID]/img/[filename].gif);
  min-height: 50px; /* Or the height of your GIF, if different */  
  background-repeat: no-repeat;  
  background-position: center;

4. Zip your package, upload it to the PBO Customization Manager, and deploy.

5. In your Alma mashup skin CSS, add the following ruleset to give the iframe body a background
color. This will ensure no part of the loading GIF will be visible after the Get It/View It windows
load. By default the background of full records in Primo is #f3f3f3.

/* Add background color to iframe body */
  body {
  background-color: #f3f3f3;

6. Zip your mashup skin and upload it to Alma under Configuration Menu > General > User
Interface Settings > Delivery System Skins. See Modifying a Skin for full instructions.

7. Test your loading spinner by visiting several records in Primo. If your windows load too quickly
to see the spinner, use browser tools to hide the iframes and reveal the background image of
the prm-alma-mashup parent.

Image of spinner and code

Back to Blog
Comments (0)
Reply To Article