Index: lams_learning/web/loadToolActivity.jsp
===================================================================
diff -u -rc568507be7453ecbf1f7e0b10ccddbf2bdf60fe1 -r471ceb8244c3c504e9055b27c470c33fa2a86de8
--- lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision c568507be7453ecbf1f7e0b10ccddbf2bdf60fe1)
+++ lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision 471ceb8244c3c504e9055b27c470c33fa2a86de8)
@@ -27,7 +27,8 @@
 <c:set var="title"><fmt:message key="learner.title" /></c:set>
 
 <lams:PageLearner title="${title}" toolSessionID="" hideHeader="true" hideTitle="true">
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/nprogress.js"></script>		
+	<script type="text/javascript" src="${lams}includes/javascript/lottie/lottie-player.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/nprogress.js"></script>		
 	<c:if test="${!empty activityForm.activityURLs}">
 		<script type="text/javascript">
 			function redirectPage() {
@@ -74,20 +75,57 @@
 				redirectPage();
 			});
 		</script>
-			
-		<div id="container-main">
-			<div class="text-center mt-4">
-				<button class="btn btn-outline-secondary btn-lg" type="button" disabled>
-					<span class="spinner-border me-2" role="status" aria-hidden="true" style="width: 1.35rem; height: 1.35rem;"></span>
-					<fmt:message key="message.activity.loading" />
+
+		<header id="header" class="d-flex justify-content-between align-items-center mt-n5 ms-n5 me-n5" role="banner">
+			<div class="d-flex align-items-center w-100">
+				<button class="btn btn-light no-decoration disabled" id="hamb" type="button" disabled>
+					<i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
 				</button>
+
+				<h1 id="lesson-name" class="placeholder-wave flex-grow-2 col-md-6 col-9">
+					<span class="placeholder placeholder-sm bg-secondary bg-opacity-50 col-5"></span>
+					<span class="placeholder placeholder-sm bg-secondary bg-opacity-50 col-4"></span>
+				</h1>
 			</div>
+
+			<div class="top-menu">
+				<button id="profile-picture" class="btn btn-light no-decoration px-3 disabled" type="button" disabled>
+					<img class="portrait-sm portrait-round" src="${lams}images/css/john-doe-portrait.jpg" alt="Your profile portrait">
+				</button>
+		                    
+				<button type="button" id="progress-bar-widget" class="btn btn-light no-decoration d-none d-sm-none d-md-block disabled" disabled>
+					<div class="row m-0">
+						<div class="col-6 text-start p-0">
+							<fmt:message key='label.progress'/>
+						</div>
+						<div class="col-6 text-end p-0" id="progress-bar-widget-value">0%</div>
+					</div>
+					<div class="progress mt-1 mb-2">
+						<div class="progress-bar bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 0%;"></div>
+					</div>
+				</button>
+
+				<c:if test="${not isIntegrationLogin}"> 
+					<a href="/" id="return-to-index" class="btn btn-light btn-close btn-sm disabled" disabled></a>
+				</c:if>
+			</div>
+		</header>
 			
-			<div class="text-center placeholder-glow">
-				<span class="placeholder col-12 col-md-10 placeholder-xs mt-5 mb-3"></span>
-			    <c:forEach var="i" begin="1" end="7">
-			    	<span class="placeholder col-12 col-md-10 placeholder-xs my-3"></span>
-			    </c:forEach>
+		<div id="container-main">	
+			<div class="text-center mx-auto" aria-live="assertive">
+				<lottie-player
+				  autoplay
+				  loop
+				  mode="normal"
+				  src="${lams}includes/javascript/lottie/loading_sphere.json"
+				  style="width: 320px; height: 200px; margin-top: 5rem;"
+				  class="mx-auto"
+				>
+				</lottie-player>
+			
+				<h2 class="visually-hidden">
+					<fmt:message key="message.activity.loading" />
+				</h2>
 			</div>
 		</div>
 	</c:if>