diff --git a/templates/camera_events_partial.html b/templates/camera_events_partial.html
index 5c352f0..a717be1 100644
--- a/templates/camera_events_partial.html
+++ b/templates/camera_events_partial.html
@@ -1,21 +1,21 @@
 <h3>List of Events <i class="bi bi-calendar-event"></i></h3>
 <h5>{{ template_values['camera'].name }}</h5>
-<a href="/camera/{{ template_values['camera'].id }}/events/1" hx-get="/camera/{{ template_values['camera'].id }}/events/1" hx-trigger="click" hx-target="#camera_status_events">
+<a href="/camera/{{ template_values['camera'].id }}/events/1" hx-get="/camera/{{ template_values['camera'].id }}/events/1" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
     <button class="btn btn-outline-success">
         <i class="bi bi-calendar-event" title="click to load events list for 1 day">1x</i>
     </button>
 </a>
-<a href="/camera/{{ template_values['camera'].id }}/events/3" hx-get="/camera/{{ template_values['camera'].id }}/events/3" hx-trigger="click" hx-target="#camera_status_events">
+<a href="/camera/{{ template_values['camera'].id }}/events/3" hx-get="/camera/{{ template_values['camera'].id }}/events/3" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
     <button class="btn btn-outline-success">
         <i class="bi bi-calendar-event" title="click to load events list for 3 days">3x</i>
     </button>
 </a>
-<a href="/camera/{{ template_values['camera'].id }}/events/7" hx-get="/camera/{{ template_values['camera'].id }}/events/7" hx-trigger="click" hx-target="#camera_status_events">
+<a href="/camera/{{ template_values['camera'].id }}/events/7" hx-get="/camera/{{ template_values['camera'].id }}/events/7" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
     <button class="btn btn-outline-success">
         <i class="bi bi-calendar-event" title="click to load events list for 7 days">7x</i>
     </button>
 </a>
-<a href="/camera/{{ template_values['camera'].id }}/status_plot" hx-get="/camera/{{ template_values['camera'].id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
+<a href="/camera/{{ template_values['camera'].id }}/status_plot" hx-get="/camera/{{ template_values['camera'].id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
     <button class="btn btn-outline-success">
         <i class="bi bi-bar-chart" title="click to generate graph of events"></i>
     </button>
diff --git a/templates/cameras_partial.html b/templates/cameras_partial.html
index 23aac4e..29932b0 100644
--- a/templates/cameras_partial.html
+++ b/templates/cameras_partial.html
@@ -9,17 +9,17 @@
                 {{ camera.name }}
             </div>
             <div class="col-5">
-                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">
+                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-card-image" title="click to load preview image"></i>
                     </button>
                 </a>
-                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">
+                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-calendar-event" title="click to load events list"></i>
                     </button>
                 </a>
-                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
+                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-bar-chart" title="click to generate graph of events"></i>
                     </button>
@@ -37,17 +37,17 @@
                 {{ camera.name }}
             </div>
             <div class="col-5">
-                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">
+                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-card-image" title="click to load preview image"></i>
                     </button>
                 </a>
-                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">
+                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-calendar-event" title="click to load events list"></i>
                     </button>
                 </a>
-                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
+                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
                     <button class="btn btn-outline-success">
                         <i class="bi bi-bar-chart" title="click to generate graph of events"></i>
                     </button>
@@ -58,5 +58,5 @@
 {% endfor %}
 
 
- <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list"  class="btn btn-md btn-secondary">load cameras</button>
+ <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list"  class="btn btn-md btn-secondary" hx-indicator=".progress">load cameras</button>
 <br>
diff --git a/templates/index.html b/templates/index.html
index 38db4b2..32e90eb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,6 +12,110 @@
 		overflow: auto;
 	}
 
+
+	.progress {
+	  position: fixed;
+	  top: 0;
+	  z-index: 1000;
+	  height: 4px;
+	  width: 100%;
+	  border-radius: 2px;
+	  background-clip: padding-box;
+	  overflow: hidden;
+	}
+	.progress .indeterminate:before {
+	  content: "";
+	  position: absolute;
+	  background-color: inherit;
+	  top: 0;
+	  left: 0;
+	  bottom: 0;
+	  will-change: left, right;
+	  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+	    infinite;
+	  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+	}
+	.progress .indeterminate:after {
+	  content: "";
+	  position: absolute;
+	  background-color: inherit;
+	  top: 0;
+	  left: 0;
+	  bottom: 0;
+	  will-change: left, right;
+	  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+	    infinite;
+	  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+	    infinite;
+	  -webkit-animation-delay: 1.15s;
+	  animation-delay: 1.15s;
+	}
+	.progress {
+	  display: none;
+	}
+	.htmx-request .progress {
+	  display: inline;
+	}
+	.htmx-request.progress {
+	  display: inline;
+	}
+	@-webkit-keyframes indeterminate {
+	  0% {
+	    left: -35%;
+	    right: 100%;
+	  }
+	  60% {
+	    left: 100%;
+	    right: -90%;
+	  }
+	  100% {
+	    left: 100%;
+	    right: -90%;
+	  }
+	}
+	@keyframes indeterminate {
+	  0% {
+	    left: -35%;
+	    right: 100%;
+	  }
+	  60% {
+	    left: 100%;
+	    right: -90%;
+	  }
+	  100% {
+	    left: 100%;
+	    right: -90%;
+	  }
+	}
+	@-webkit-keyframes indeterminate-short {
+	  0% {
+	    left: -200%;
+	    right: 100%;
+	  }
+	  60% {
+	    left: 107%;
+	    right: -8%;
+	  }
+	  100% {
+	    left: 107%;
+	    right: -8%;
+	  }
+	}
+	@keyframes indeterminate-short {
+	  0% {
+	    left: -200%;
+	    right: 100%;
+	  }
+	  60% {
+	    left: 107%;
+	    right: -8%;
+	  }
+	  100% {
+	    left: 107%;
+	    right: -8%;
+	  }
+	}
+
 </style>
 {% endblock %}
 
@@ -22,6 +126,10 @@
 
 {% block main %}
 
+<div class="progress" style="height: 3px; background-color: white;">
+	<div class="indeterminate" style="background-color: red;"></div>
+</div>
+
 <div class="container text-center">
 
     <div class="row">