Skip to content

Instantly share code, notes, and snippets.

@samermurad

samermurad/outlinedProgress.html

Created May 19, 2020 15:02
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 samermurad/0837c71e4247afb5f9e5ba9adb97336d to your computer and use it in GitHub Desktop.
Save samermurad/0837c71e4247afb5f9e5ba9adb97336d to your computer and use it in GitHub Desktop.
Download ZIP
HTML/JS/CSS Inverted Progress Text progress bar
Raw
outlinedProgress.html
<!DOCTYPE html>
<html>
<head>
<title> Test Progress</title>
</head>
<style type="text/css">
.progress {
position: relative;
display: flex;
height: 100px;
border: 3px solid #566573;
border-radius: 8px;
font-size: 50px;
font-family: Courier, monospace;
overflow: hidden;
}
.back {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: #5D6D7E;
color: white;
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: white;
color: black;
/* clip-path: inset(0 0 0 50%); */
/* -webkit-clip-path: inset(0 0 0 50%); */
transition: clip-path 1s linear;
}
</style>
<body>
<div id="progress" class="progress">
<div id="back" class="back">progress 0</div>
<div id="front" class="front">progress 0</div>
</div>
<div>
<br/>
<br/>
<button onclick="window.setProgress(true);">next 10</button>
<button onclick="window.setProgress(false);">prev 10</button>
</div>
</body>
<script type="text/javascript">
window.progressText = 'progress';
window.progressPercent = 0;
window.setup = () => {
let text = `${window.progressText} ${window.progressPercent}%`;
let inset = `inset(0 0 0 ${window.progressPercent}%)`;
document.getElementById('back').innerHTML = text;
document.getElementById('front').innerHTML = text;
document.getElementById('front').style['clip-path'] = inset;
document.getElementById('front').style['-webkit-clip-path'] = inset;
}
window.setProgress = (next = true) => {
if (next && window.progressPercent + 10 > 100) {
window.progressPercent = 0;
} else if (!next && window.progressPercent - 10 < 0) {
window.progressPercent = 0
} else {
window.progressPercent = next ? window.progressPercent + 10 : window.progressPercent - 10;
}
window.setup();
}
window.setup();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment