Skip to content

Instantly share code, notes, and snippets.

@VenkataRaju

VenkataRaju/CustomProgressbar.html

Created March 2, 2018 11:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save VenkataRaju/f91e64c686df780de4fa3938e89a9ad9 to your computer and use it in GitHub Desktop.
Save VenkataRaju/f91e64c686df780de4fa3938e89a9ad9 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Progressbar
Raw
CustomProgressbar.html
<!DOCTYPE html>
<html>
<head lang="en-US">
<meta charset="UTF-8">
<title>Custom Progressbar</title>
<script>
let progress, progressText, currentProgress = 0, delay = 25;
function init()
{
[progress, progressText] = ['progress', 'progress-text'].map(id => document.getElementById(id));
updateProgress()
}
function updateProgress()
{
progress.style.width = currentProgress + '%';
progressText.textContent = ~~currentProgress + '%';
currentProgress += 0.08;
let reset = false;
if (currentProgress >= 100)
{
progress.style.width = '100%';
progressText.textContent = '100%';
currentProgress = 0;
delay = 25;
reset = true;
}
setTimeout(updateProgress, reset ? 800 : (delay -= 0.1));
}
</script>
<style>
body
{
text-align: center;
padding-top: 8em;
}
#progress-bar
{
border: 1px solid #AAA;
border-radius: 4px;
width: 75%;
height: 30px;
position: relative;
background-color: white;
text-align: left;
}
.ib
{
display: inline-block;
height: 100%;
}
#progress
{
background-color: black;
}
#progress-text
{
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
text-align: center;
position: absolute;
overflow: hidden;
font-family: monospace;
font-size: 1.5em;
color: white;
mix-blend-mode: difference;
}
</style>
</head>
<body onload="init()">
<span id='progress-bar' class='ib'><span id='progress' class='ib'></span><span id='progress-text' class='.ib'></span></span>
</body>
</html>
@VenkataRaju
Copy link
Author

View here: https://cdn.rawgit.com/VenkataRaju/f91e64c686df780de4fa3938e89a9ad9/raw/97cc3f42937e0b594b7164c78dd91448b8e205cf/CustomProgressbar.html

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