Dynamics Community Forum Thread Details

show loading spinner on custom navbar web links

Ok, so I added a loading overlay with spinner to the buttons on my home page. Great! that works. Then I thought hey wouldnt it be nice to show the same overlay with spinner when a user clicks on my custom navbar links?

I certainly had fun figuring this one out.

1. Changes to the Header web template

include creating an appropriate name for use as an id attribute and adding an id attribute to the menuitem

These menuitems are created inside a for loop. id name is the link text with no spaces with "link" appended to it.

{% comment %} create an id name for use in anchor tag {% endcomment %}
{% if link.name contains "Ticket" %}
{% assign ln22 = {{link.name | remove:' ' }} %}
{% assign y = "Link" %}
{% assign linkId = ln22 | append: y %}
{% endif %}

2. Changes to the Home web template

Use the newly created id name to bind the loader to a click on the link

in doc ready:

/ show loader spinner when navbar links are clicked
$("#CreateNewTicketLink").bind("click", function () {
$('#loader').show();
});
$("#TicketSearchLink").bind("click", function () {
$('#loader').show();
});

3. Changes to custom.css

#loader {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(255,255,255,0.8);
z-index:9999;
display:none;
}

@-webkit-keyframes spin {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

#loader::after {
content:'';
display:block;
position:absolute;
left:48%;top:40%;
width:100px;height:100px;
border-style:solid;
border-color:#3498db;
border-top-color:transparent;
border-width: 7px;
border-radius:50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

4. complete web template files for reference

portal-header-web-template.txt portal-home-web-template.txt

If you try this, let me know if it doesnt work for you. I think I got all of the changes in here but you never know.

also, if there is a better way to do this, I would be interested in that too.

Quick Links

Leaderboard