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 %}

<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown dropdown-menu-right {% endif %}">
<a role="menuitem" {%- if linkId %} id="{{linkId}}" {% endif -%}
aria-label="{{ link.name | escape }}"

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();
});

<section class="page_section section-landing" style="text-align:center">
<div class="container" role="main">
<div class="row">
 
<div id="loader"></div>
</div>
<row>
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
{% assign homeurl = website.adx_partialurl %}

<div class="navbar navbar-static-top" role="navigation" >

  <div class="container container-header">
           
    <div class="navbar-header" >
  
      <div class="visible-xs-block">
        {% editable snippets 'Mobile Header' type: 'html' %}
      </div>
      <div class="visible-sm-block visible-md-block visible-lg-block navbar-brand">

  
      </div>
      <button type="button" class="navbar-toggle collapsed" title="{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}" data-toggle="collapse" data-target="#navbar" aria-expanded="false" onclick="setHeight();">
        <span class="sr-only">{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    {% comment %} create all NAVBAR components {% endcomment %}
    <div id="navbar" class="navbar-collapse collapse">
      {% assign primary_nav = weblinks["Primary Navigation"] %}
      {% if primary_nav %}
        <div class="navbar-right menu-bar {% if primary_nav.editable %}xrm-entity xrm-editable-adx_weblinkset{% endif %}" data-weblinks-maxdepth="2">
          <ul class="nav navbar-nav weblinks" role="menubar">
           {% for link in primary_nav.weblinks %}

              {% unless forloop.first %}
                  <li class="divider-vertical" aria-hidden="true"></li>
              {% endunless %}

              {% if link.display_page_child_links %}
                {% if link.url != null %}
                    {% comment %} get any (child) links that belong to the page represented by this link {% endcomment %}
                    {% assign sublinks = sitemap[link.url].children %}
                {% endif %}
              {% else %}
                  {% assign sublinks = link.weblinks %}
              {% endif %}
              
              {% 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 %}

              {% comment %} create web links on NAVBAR {% endcomment %}
              <li role="none" class="weblink {% if sublinks.size > 0 %} dropdown dropdown-menu-right {% endif %}">
                <a role="menuitem" {%- if linkId %}  id="{{linkId}}" {% endif -%}
                    aria-label="{{ link.name | escape }}"
                    {% if sublinks.size > 0 -%}
                        href="#" class="dropdown-toggle" data-toggle="dropdown"
                    {%- else -%}
                        href="{{ link.url | escape }}"
                    {%- endif -%}
                    {%- if link.Open_In_New_Window %} target="_blank" {% endif -%}
                    {%- if link.nofollow %} rel="nofollow"{% endif -%}
                    {%- if link.tooltip %} title="{{ link.tooltip | escape }}"{% endif %}>
                    {%- if link.image -%}
                      {%- if link.image.url startswith '.' -%}
                              <span class="{{ link.image.url | split:'.' | join }}" aria-hidden="true"></span>
                      {%- else -%}
                              <img src="{{ link.image.url | escape }}"
                                  alt="{{ link.image.alternate_text | default:link.tooltip | escape }}"
                                  {% if link.image.width %}width="{{ link.image.width | escape }}" {% endif %}
                                  {% if link.image.height %}height="{{ link.image.height | escape }}" {% endif %} />
                      {%- endif -%}
                    {%- endif -%}
                    {%- unless link.display_image_only -%}
                          {{ link.name | escape }}
                    {%- endunless -%}
                    {%- if sublinks.size > 0 -%}
                          <span class="caret"></span>
                    {%- endif -%}
                </a>

                {% if sublinks.size > 0 %}
                  <ul class="dropdown-menu" role="menu">
                    {% if link.url %}
                      <li role="none">
                        <a role="menuitem"
                           aria-label="{{ link.name | escape }}"
                           href="{{ link.url }}"
                           {% if link.Open_In_New_Window %} target="_blank" {% endif %}
                           {% if link.nofollow %}rel="nofollow" {% endif %}
                           {% if link.tooltip %}title="{{ link.tooltip | escape }}" {% endif %}>{{ link.name | escape }}</a>
                      </li>
                      <li class="divider"></li>
                    {% endif %}

                    {% for sublink in sublinks %}
                      <li role="none">
                        <a role="menuitem"
                           aria-label="{{ sublink.name | default:sublink.title | escape }}"
                           href="{{ sublink.url }}"
                           {% if sublink.Open_In_New_Window %} target="_blank" {% endif %}
                           {% if sublink.nofollow %}rel="nofollow" {% endif %}
                           {% if sublink.tooltip %}title="{{ sublink.tooltip | escape }}" {% endif %}>
                           {{ sublink.name | default:sublink.title | escape }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </li>

            {% endfor %}

            {% comment %} create profile links {% endcomment %}
            <li class="divider-vertical" aria-hidden="true"></li>

            {% if website.languages.size > 1 %}
              <li class="dropdown" role="none">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="menuitem" aria-label="{{ website.selected_language.name | escape }}" aria-haspopup="true" aria-expanded="false" title="{{ website.selected_language.name | escape }}">
                  <span class="drop_language">{{ website.selected_language.name | escape }}</span>
                  <span class="caret"></span>
                </a>
                {% include 'Languages Dropdown' %}
              </li>
            <li class="divider-vertical" aria-hidden="true"></li>
            {% endif %}


            {% comment %} create profile links {% endcomment %}
            {% if user %}
              <li class="dropdown" role="none">
                <a href="#" class="dropdown-toggle" title="{{ user.fullname | escape }}" data-toggle="dropdown" role="menuitem" aria-haspopup="true" aria-expanded="false">
                    <span class="username">{{ user.fullname | escape }}</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                  {% assign show_profile_nav = settings["Header/ShowAllProfileNavigationLinks"] | boolean | default:true %}
                  {% if show_profile_nav %}
                    {% assign profile_nav = weblinks["Profile Navigation"] %}
                    {% if profile_nav %}
                      {% for link in profile_nav.weblinks %}
                          <li role="none">
                          <a role="menuitem" aria-label="{{ link.name | escape }}" href="{{ link.url | escape }}" title="{{ link.name | escape }}">{{ link.name | escape }}</a>
                        </li>
                      {% endfor %}
                    {% endif %}
                  {% else %}
                      <li role="none"><a role="menuitem" aria-label="{{ snippets["Profile Link Text"] | default:resx["Profile_Text"] | escape }}" href="{{ sitemarkers['Profile'].url | escape }}">{{ snippets["Profile Link Text"] | default:resx["Profile_Text"] | escape }}</a></li>
                  {% endif %}
                  <li class="divider" role="separator" aria-hidden="true"></li>
                  <li role="none">
                      <a role="menuitem" aria-label="{{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}" href="{% if homeurl%}/{{ homeurl }}{% endif %}{{ website.sign_out_url_substitution }}" title="{{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}">
                      {{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}
                    </a>
                  </li>
                </ul>
              </li>
            {% else %}
              <li role="none">
                <a role="menuitem" aria-label="{{ snippets["links/login"] | default:resx["Sign_In"] | escape }}" href="{% if homeurl%}/{{ homeurl }}{% endif %}{{ website.sign_in_url_substitution }}" title="{{ snippets["links/login"] | default:resx["Sign_In"] | escape }}">
                      {{ snippets["links/login"] | default:resx["Sign_In"] | escape }}
                </a>
              </li>
            {% endif %}
          </ul>
          {% editable primary_nav %}
        </div>
      {% endif %}
    </div>
  </div>
</div>

{% substitution %}
  {% assign current_page = page.id %}
  {% assign sr_page = sitemarkers["Search"].id %}
  {% assign forum_page = sitemarkers["Forums"].id %}
  {% if current_page == sr_page or current_page == forum_page %}
    {% assign section_class = "section-landing-search" %}
    {% if current_page == forum_page %}
      {% assign section_class = "section-landing-forums" %}
    {% endif %}
    <section class="page_section {{ section_class | h }} color-inverse">
      <div class="container">
        <div class="row ">
          <div class="col-md-12 text-center">
            {% if current_page == sr_page %}
              <h1 class="section-landing-heading">{% editable snippets 'Search/Title' default: resx["Discover_Contoso"] %}</h1>
              {% include 'Search' %}
            {% endif %}
          </div>
        </div>
      </div>
    </section>
  {% endif %}
{% endsubstitution %}
<script type="text/javascript">
         window.onload = function() {
            if(window.navigator.appName == "Microsoft Internet Explorer" || window.navigator.userAgent.indexOf("Trident") > 0){
                var searchElement = document.getElementById("search");
                if (searchElement != null) searchElement.setAttribute("href", "");
            }
          };

          function setHeight(){
           var windowHeight = window.innerHeight - 140;
           var navbar = document.getElementById("navbar");
           if (navbar) {
            navbar.style.maxHeight = windowHeight + "px";
   }
          }

          window.addEventListener('resize', function (event) {
           setHeight();
          });
</script>
{% block main %}

{% assign knowledge_url = sitemarkers['Knowledge'].url %}
{% assign createcase_url = sitemarkers['Create Ticket SM'].url %}
{% assign ticketsearch_url = sitemarkers['Ticket Search SM'].url %}

<script type="text/javascript">
    $(document).ready(function() {


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


        // show loader spinner when action buttons are clicked
        $("#createTicketButton").bind("click", function () {
           $('#loader').show();
        });
        $("#ticketSearchButton").bind("click", function () {
           $('#loader').show();
        });
    });
</script>

<section class="page_section section-landing" style="text-align:center">
  <div class="container" role="main">
  <div class="row">
      &nbsp;
      <div id="loader"></div>
  </div>
  <row>
    <div class="col m6">
      <div class="card" style="text-align:center; display:inline-block;">
            <h4 class="card-title p-0 "><i class="fa fa-pencil"></i>&nbsp;&nbsp;Create A New Ticket</h4>
            <p class="card-text">Create and submit a ticket to the Child support Help Desk</p>
              <a id="createTicketButton" name="createTicketButton" href="{{ createcase_url | escape }}" class="btn btn-home-page btn-rounded fa">Create&#8196;Ticket</a>
      </div>
      <div class="card stretched-link" style="display:inline-block;">
            <h4 class="card-title p-0"> <i class="fa fa-search"></i>&nbsp;&nbsp;Search For A Ticket</h4>
            <p class="card-text">Find your Ticket in the Child Support Help Desk</p>
            <a id="ticketSearchButton" name="ticketSearchButton" href="{{ ticketsearch_url | escape }}" class="btn btn-home-page btn-rounded fa">Ticket&#8196;Search</a>
      </div>
    </div>
  </row
  <div class="row">
      &nbsp;
  </div>
</div>
  <div class="layer_down">
    &nbsp;
  </div>
</section>

{% endblock %}
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.