// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com
h1 <span> ๐๐ฝ I present:</span> ๐ฅ ... The depressing loading bar ๐๐ฝ
#loading-bar
#progress
p <span>0</span> / 100
a( href='http://bit.ly/2JPuBjx' target="_blank" class='reference' ) ๐ Ali Soueidan
View Compiled
// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com
body
display: flex
flex-direction: column
justify-content: center
align-items: center
margin: 0
height: 100vh
overflow: hidden
#loading-bar
width: 50vw
height: 5vw
min-height: 24px
background-color: #eaeaea
border: 1vw solid #fff
border-radius: 5vw
box-shadow: 0 0 2vw rgba(0,127,255,.25)
overflow: hidden
&.complete
transition: .8s ease
transform: rotate(-180deg)
#progress
transition: .4s ease
width: 0%!important
#progress
width: 0%
height: 100%
background: linear-gradient(#25C42F, #25c491)
transition: .5s ease
h1
margin-bottom: 6vw
font-family: arial
font-size: 2vw
font-weight: 100
text-align: center
span
display: block
margin-bottom: 1vw
p
margin-top: 2vw
font-family: arial
font-size: 2vw
.reference
position: absolute
right: 24px
bottom: 24px
font-family: arial
text-decoration: none
View Compiled
// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com
let bar = document.querySelector("#loading-bar");
let progress = document.querySelector("#progress");
let reporter = document.querySelector("p > span");
let processingTime = 800;
let i = 0;
setInterval( function(){
if ( i < 99 ) {
i = i + Math.floor(Math.random() * (25 - 1));
progress.style.width = i + "%";
processingTime = Math.floor(Math.random() * (3000 - 800));
if ( i >= 99 ) {
i = 99;
reporter.textContent = i;
bar.classList.add('complete');
processingTime = 1000;
}
reporter.textContent = i;
} else {
i = 0;
progress.style.width = i + "%";
reporter.textContent = i;
bar.classList.remove('complete');
processingTime = Math.floor(Math.random() * (3000 - 800));
};
}, processingTime);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.