Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root


1 badge earned


Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!


Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.


Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!


Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

How can I add a spinner to a page or a macro

I have a relatively large confluence page. And it takes about 10-15 seconds to load and display all macros/components. 

How can I add spinner to the entire page, or maybe to individual macros so people know the page is still loading?

1 answer

1 accepted

0 votes
Answer accepted
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
May 12, 2023 • edited

One possible solution (only applicable to Server/Data Center) is to add an HTML macro to the page and use JS/CSS/HTML. 

CSS to hide the main page body while it loads, then some JS to show a loader and set a timeout of 5 seconds before removing the loader and displaying the page. You can adjust that time depending on how long the page actually takes to load.

#main-content { display:none }
#loading { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#loading aui-spinner { margin: 1em; }
.custom-card-style { border-radius: 3px; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31); margin: 0 auto; padding: 10px; width: 20em; }

AJS.toInit(function () {
AJS.$('#main-content').before('<div id="loading" class="custom-card-style"><p>Loading page...</p><aui-spinner size="large"></aui-spinner></div>');
setTimeout(function(){ AJS.$('#loading').remove(); AJS.$('#main-content').show(); } ,5000)


Place the HTML macro as the 1st macro in the page. Just be aware that it will be displayed in full when editing the page. 

More details regarding spinners & AUI:

Thank you so much. This is really helpful! Thank you

Like Matt likes this

Suggest an answer

Log in or Sign up to answer
AUG Leaders

Atlassian Community Events