Initial Commit

README.md

@@ -1,2 +1,35 @@
 # Percent-Preloader
 A simple, light-weight page preloader showing percent complete as the page loads.
+
+## Why? 
+Page preloaders give your users a few seconds to understand that the page IS loading, but will take just a moment.  As web nerds, there are tons of choices in preloaders.  Here's just another one. 
+
+Precent Preloader uses no graphics at all and relies on CSS3 for the transition effects.  We're making the assumnption you are using jQuery in your project, so it won't complete the count to 100% until jQuery is a function and all (above the fold) assets have been loaded and the page is interactive.
+
+## How to Use it?
+Download the latest release and simply include both the CSS and the JS in your project. 
+
+```html
+<link rel="stylesheet" href="percent-preloader.css">
+<script src="percent-preloader.js"></script>
+```
+If you want, you could also inline the CSS and the JS.  Totally up to you.
+
+Then, paste the preloading HTML just inside your `body` tag.
+```html
+<div class="preloader">
+	<div class="inner">
+		<span class="percentage"><span id="percentage">15</span>%</span>
+	</div>
+	<div class="loader-progress" id="loader-progress"> </div>
+</div>
+<div class="transition-overlay"></div>
+```
+
+## Demo
+Want to see it in action?  Check out the demo at: https://demo.jdmdigital.co/percent-preloader/
+
+You may need to throttle your browser if it's loading too fast.  What a great problem that is to have. ;)
+
+## To Do
+We'll still get a ding from Page Speed testers because we're loading the JS in the head here.  Thinking about a way around that.  For now, it'll visually queue your users that the page is loading and to just give it a moment--rather than relying on the browser's nearly invisible loading bar or icon.

percent-preloader.css

@@ -0,0 +1,105 @@
+/*!
+ * Percent-Preloader CSS - v1
+ * @author JDM Digital - https://jdmdigital.co
+ * Copyright (c) 2022
+ */
+.preloader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	margin: auto;
+	width: 100vw;
+	height: 100vh;
+	background: #797979;
+	opacity: 1;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	transition: all 0.3s ease;
+	transition-duration: 500ms;
+	-webkit-transition-duration: 500ms;
+	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+	z-index: 99;
+	transition-delay: 0.65s;
+}
+.preloader .inner {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+.preloader:before {
+	content: "";
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 0 200px 100vh 0;
+	border-color: transparent #797979 transparent transparent;
+	position: absolute;
+	left: -200px;
+	top: 0;
+}
+.preloader:after {
+	content: "";
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 100vh 0 0 200px;
+	border-color: transparent transparent transparent #797979;
+	position: absolute;
+	right: -200px;
+	top: 0;
+}
+.preloader * {
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	transition: all 0.3s ease;
+	transition-duration: 500ms;
+	-webkit-transition-duration: 500ms;
+	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+}
+.transition-overlay {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	right: calc(-100% - 200px);
+	bottom: 0;
+	background: #797979;
+	z-index: 9999;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	transition: all 0.3s ease;
+	transition-duration: 500ms;
+	-webkit-transition-duration: 500ms;
+	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+	visibility: hidden;
+}
+.preloader .inner .percentage {
+	width: 100%;
+	font-size: 28vw;
+	line-height: 1;
+	font-weight: 800;
+	color: #fff;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	text-align: center;
+	opacity: 0.2;
+	transition-delay: 0.10s;
+}
+.navigation__transparent.navbar{
+	visibility: hidden;
+}
+.page-loaded .preloader .percentage {
+	margin-left: 100px;
+	opacity: 0;
+}
+.page-loaded .preloader {
+	left: calc(-100% - 200px);
+	visibility: hidden;
+}

percent-preloader.js

@@ -0,0 +1,34 @@
+/*!
+ * Percent-Preloader JS - v1
+ * @author JDM Digital - https://jdmdigital.co
+ * Copyright (c) 2022
+ */
+var counting = setInterval(function () {
+	var loader = document.getElementById("percentage");
+	var currval = parseInt(loader.innerHTML);
+	var Width = 99 - currval;
+	var loadscreen = document.getElementById("loader-progress");
+	loader.innerHTML = ++currval;
+	if (currval > 89){
+		loader.innerHTML = 90;
+		if(window.jQuery) {
+			//console.log('jquery loaded');
+			loader.innerHTML = 95;
+			if(document.readyState == "interactive") {
+				loader.innerHTML = 99;
+			}
+			if(document.readyState == "complete") {
+				//console.log('fully loaded!');
+				clearInterval(counting);
+				loader.innerHTML = 100;
+				jQuery("body").toggleClass('page-loaded');
+				setTimeout(function() {
+					jQuery('nav').css('visibility','visible')
+				}, 880);
+			}
+		}
+	} 
+
+	loadscreen.style.transition = "0.15s";
+	loadscreen.style.width = Width + "%";
+}, 20);