Skip to content

Instantly share code, notes, and snippets.

@norahul1020
Created February 21, 2023 15:48
Show Gist options
  • Save norahul1020/11d608166180ddfb9f97798aab3ed564 to your computer and use it in GitHub Desktop.
Save norahul1020/11d608166180ddfb9f97798aab3ed564 to your computer and use it in GitHub Desktop.
Hacker-Style loading
<div id="loading"> LOADING</div>
alphabet = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
letter_count = 0;
el = $("#loading");
word = el.html().trim();
finished = false;
el.html("");
for (var i = 0; i < word.length; i++) {
el.append("<span>"+word.charAt(i)+"</span>");
}
setTimeout(write, 75);
incrementer = setTimeout(inc, 1000);
function write() {
for (var i = letter_count; i < word.length; i++) {
var c = Math.floor(Math.random() * 36);
$("span")[i].innerHTML = alphabet[c];
}
if (!finished) {
setTimeout(write, 75);
}
}
function inc() {
$("span")[letter_count].innerHTML = word[letter_count];
$("span:eq("+letter_count+")").addClass("glow");
letter_count++;
if (letter_count >= word.length) {
finished = true;
setTimeout(reset, 1500);
} else {
setTimeout(inc, 1000);
}
}
function reset() {
letter_count = 0;
finished = false;
setTimeout(inc, 1000);
setTimeout(write, 75);
$("span").removeClass("glow");
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body {
background: #111;
color: #411;
font-family: Consolas, Courier, monospace;
font-size: 60px;
text-shadow: 0 0 15px #411;
height: 100%;
}
div {
position: relative;
top: 50%;
margin: -30px auto;
text-align: center;
}
.glow {
color: #f00;
text-shadow: 0px 0px 10px #f00;
}
span {
display: inline-block;
padding: 0 10px;
}
@norahul1020
Copy link
Author

Personal Site

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment