Progress Bar with CSS

on
<!DOCTYPE html>
<html>
  <body>
    <div class="progress-bar" style="--width: 10" data-label="Loading..."></div>
    </body>
</html>


CSS


*, *::before, *::after {
box-sizing: border-box;
}

body {
padding: 0;
margin: 0;
}

.progress-bar {
position: relative;
width: 500px;
height: 3em;
background-color: #111;
border-radius: 1.5em;
color: white;
}

.progress-bar::before {
content: attr(data-label);
display: flex;
align-items: center;
position: absolute;
left: .5em;
top: .5em;
bottom: .5em;
width: calc(var(--width, 0) * 1%);
min-width: 2rem;
max-width: calc(100% - 1em);
background-color: #069;
border-radius: 1em;
padding: 1em;
}














/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DFDFDF;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-twitter {
  background-color: #1DA1F2;
}

.side-link-github {
  background-color: #6e5494;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

JAVASCRIPT

const progressBar = document.getElementsByClassName('progress-bar')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  progressBar.style.setProperty('--width', width + .1)
}, 5)

OUTPUT



Comments

Post a Comment