Skip to content

Instantly share code, notes, and snippets.

@e-neko
Created June 9, 2020 20:53
Show Gist options
  • Save e-neko/265016dd1165df519fe4ec45eed3ce0a to your computer and use it in GitHub Desktop.
Save e-neko/265016dd1165df519fe4ec45eed3ce0a to your computer and use it in GitHub Desktop.
A simple take on asymptotic progress bar
let pbar = document.createElement('div');
pbar.classList.add('progress');
document.body.append(pbar);
let st = document.createElement('style');
st.innerText=`
.progress {
width: calc(100vw - 20px);
margin: 10px; height: 10px;
border-radius: 5px;
background-color: silver;
}`;
document.head.append(st);
let setProgress = progress=>{
pbar.setAttribute('style', `background-image: linear-gradient(to right, green, green ${progress}%, transparent ${progress}%)`)
}
const setAsymptotic = progress=>(progress<90) ? setProgress(progress) : setProgress(90+10*(1-(1/(1+progress-90))**0.4));
// test
let itv = setInterval((p=>()=>setAsymptotic(p++))(70), 500); //start from 70, update every 0.5 sec
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment