Bar movement

Move bars by changing width property

by phollome

HTML

<div id="container-top">
  <div id="bar-top"></div>
</div>
<div id="container-bottom">
  <div id="bar-bottom"></div>
</div>

CSS

html, body, div {
  margin: 0;
  padding: 0;
}
#container-top, #container-bottom {
  width: 100vw;
  height: 50vh;
}

#container-top {
  background: red;
}

#container-bottom {
  background: lightgreen;
}

#bar-top, #bar-bottom {
  transition: width 0.5s linear;
  height: 100%;
  position: relative
}

#bar-top {
  background: skyblue;
}

#bar-bottom {
  background: yellow;
}

JavaScript

const barTop = document.querySelector('#bar-top');
const barBottom = document.querySelector('#bar-bottom');

function start() {
	let value = 0;
  const interval = setInterval(() => {
  	value += 2;
    barTop.style.width = `${value}%`;
    barBottom.style.width = `${100 - value}%`;
    if (value > 99) {
    	clearInterval(interval);
      sleep(1000)
      	.then(() => {
        	barTop.style.width = '0';
          barBottom.style.width = '100%';
          return sleep(1500);
        })
        .then(() => start());
    }
  }, 100);
}

function sleep(time) {
	return new Promise(resolve => setTimeout(resolve, time));
}

start();