Traffic-Light-Animation

Broken animation with blocking sleep-function.

HTML

<div class="traffic-light">
    <button class="request-go"></button>
    <div class="light stop active"></div>
    <div class="light prepare"></div>
    <div class="light go"><div>
</div>

CSS

* {
    box-sizing: border-box;
}

body {
    zoom: 0.6;
}

.traffic-light {
    background-color: red;
    width: 120px;
    padding: 10px;
}
.light {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: grey;
    margin-top: 10px;
}
.stop.active {
    background-color: red;
}
.prepare.active {
    background-color: yellow;
}
.go.active {
    background-color: green;
}
.request-go {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: orange;
    border: 5px solid grey;
    margin-bottom: 20px;
    margin-left: 30px;
}

JavaScript

function sleep ( delay ){
    var endTime = Date.now() + delay;
    while( endTime > Date.now() );
    return;
}

function prepare(){
    document.querySelector('.prepare').classList.add('active');    
}

function go(){
    document.querySelector('.stop').classList.remove('active');
    document.querySelector('.prepare').classList.remove('active');
    document.querySelector('.go').classList.add('active');
}
function stop(){
    document.querySelector('.go').classList.remove('active');
    document.querySelector('.stop').classList.add('active');
}

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('.request-go').addEventListener('click',function(){
        sleep( 1000 );
        prepare();
        sleep( 500 );
        go();
    },false);
});