Browse Source

add page loader (mirrors the WordPress theme's loader.php)

Self-contained loader block (dark #222 overlay + DW logo animation + fade-out on
load) at the top of the body, matching the main site's loader.
windhamdavid 1 week ago
parent
commit
0706d19562
1 changed files with 43 additions and 1 deletions
  1. 43 1
      index.html

+ 43 - 1
index.html

@@ -71,6 +71,49 @@
 </head>
 <body>
 
+<!-- Page loader (mirrors the WordPress theme's loader.php) -->
+<style>
+#loader { position:fixed; width:100%; height:100%; top:0; left:0; z-index:200000; background-color:#222; }
+.loading-animation { width:250px; height:250px; position:absolute; inset:0; margin:auto; }
+.loading-animation svg { position:absolute; top:0; left:0; transform-origin:center center; transition:all .3s; transform:rotateY(0deg); }
+.loading-animation path { fill:none; stroke:#fff; stroke-width:2; transition:all .3s; }
+.loading-animation .l1 path { fill:rgba(242,242,242,.1); stroke-dasharray:450; stroke-dashoffset:900; animation:LOADING1 4s linear 0s infinite; }
+.loading-animation .l2 path { fill:rgba(242,242,242,.1); stroke-dasharray:340; stroke-dashoffset:340; animation:LOADING2 3s linear 0s infinite; }
+.loading-animation .l3 path { fill:none; stroke-width:1; stroke-dasharray:33; stroke-dashoffset:33; animation:LOADING3 2s linear 0s infinite; }
+@keyframes LOADING1 { 0%{stroke-dashoffset:-900;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:900;} }
+@keyframes LOADING2 { 0%{stroke-dashoffset:340;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:-340;} }
+@keyframes LOADING3 { 0%{stroke-dashoffset:-230;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:230;} }
+.svg-wrap .l1 { animation:TURN 3s linear 0s infinite; }
+.svg-wrap .l2 { animation:TURN 2s linear 0s infinite; }
+.svg-wrap .l3 { animation:TURN 4.5s linear 0s infinite; }
+@keyframes TURN { 0%{transform:rotateY(0deg);opacity:1}25%{transform:rotateY(90deg);opacity:.6}50%{transform:rotateY(180deg);opacity:1}75%{transform:rotateY(270deg);opacity:.6}100%{transform:rotateY(360deg);opacity:1} }
+</style>
+<div id="loader">
+	<div class="loading-animation">
+		<div class="svg-wrap">
+			<svg class="l1" width="250px" height="250px"><path d="M242.8,131.8c-0.4-29.9-22.1-50.1-48.1-50c-16.9,0-28.6,8.4-28.6,8.4s12.7-16.2,12.6-36.9c-0.2-24.7-23-47.9-52.4-47.9C97.6,5.4,71.8,26,72.3,55.5C72.6,76.3,85,90.2,85,90.2c0,0-13.9-8.7-29-8.2C16.5,83,6.6,115.8,7.3,132.9c1.2,33.4,15.4,53.8,52.7,54.2c34.2,0.4,54.9-32.3,61-43.5c1.5-9.5,0-13.9,0-13.9c-3.1,1.6-14.5,27.9-35.6,16.1c-6.8-3.8-8.8-16.7-5.2-26.3c6.3-16.9,18.3-18.7,36-40.3c6.8-8.3,8.2-13.6,8.2-13.6s1.2,5.2,7.8,13.2c17.4,21.2,30.1,23.6,36.7,40.4c4.1,10.4,1.8,23-6,26.9c-20.3,10.1-31.4-15.1-34.9-16.5c0,0-1.2,4,0.1,12.8c2.6,5.7,21.7,44.2,64,44.2C226.3,186.6,243.1,156.2,242.8,131.8z"/></svg>
+			<svg class="l2" width="250px" height="250px"><path d="M124.5,154.1c0,0-10.8,37.5-12.7,41.9c-4.9,11.3-26.6,38.8-26.6,38.8s25.2-2.8,40.4-2.8c15.6,0,39.2,3.2,39.2,3.2s-22.8-28.1-27.6-39.6C135.4,191.2,124.5,154.1,124.5,154.1z"/></svg>
+			<svg class="l3" width="250px" height="250px"><path d="M0.5,125a124.5,124.5 0 1,0 249,0a124.5,124.5 0 1,0 -249,0"/></svg>
+		</div>
+	</div>
+</div>
+<script>
+(function () {
+	var HOLD = 1000, FADE = 2000, FAILSAFE = 9000, done = false;
+	function hideLoader() {
+		if (done) return; done = true;
+		var el = document.getElementById('loader'); if (!el) return;
+		el.style.transition = 'opacity ' + FADE + 'ms ease';
+		el.style.opacity = '0';
+		setTimeout(function () { el.style.display = 'none'; }, FADE);
+	}
+	function schedule() { setTimeout(hideLoader, HOLD); }
+	if (document.readyState === 'complete') schedule();
+	else window.addEventListener('load', schedule);
+	setTimeout(hideLoader, FAILSAFE);
+})();
+</script>
+
 <div id="backgroundsvg"></div>
 <div id="backgroundsvg2"></div>
 <div id="backgroundsvg3"></div>
@@ -796,7 +839,6 @@
             <li class="list-inline-item"><a href="https://www.facebook.com/windhamdavid" class="facebook"><i class="bi bi-facebook"></i></a></li>
             <li class="list-inline-item"><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><i class="bi bi-twitter"></i></a></li>
             <li class="list-inline-item"><a href="https://www.reddit.com/windhamdavid" class="reddit"><i class="bi bi-reddit"></i></a></li>
-            <li class="list-inline-item"><a href="https://open.spotify.com/user/windhamdavid" class="spotify" rel="me"><i class="bi bi-spotify"></i></a></li>
             <li class="list-inline-item"><a href="https://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><i class="bi bi-linkedin"></i></a></li>
           </ul>
         </div>