.container .bar {
    font-size: 20px;
    width: 200px;
    height: 25px;
    border: 3px solid #eaeaea;
    margin: 100px auto;
    border-radius: 7px;
    position: relative;
    background: rgba(255,255,255,0.6);
}
.container .bar::after {
    content: "Chargement...";
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: absolute;
    left: 18%;
    top: 150%;
}

.container .bar .sphere {
display: block;
width: 23px;
height: 100%;
background: #eaeaea;
border-radius: 50%;
-moz-animation: slide 1.75s infinite ease-in-out alternate;
-webkit-animation: slide 1.75s infinite ease-in-out alternate;
-ms-animation: slide 1.75s infinite ease-in-out alternate;
-o-animation: slide 1.75s infinite ease-in-out alternate;
}

@-moz-keyframes slide {
    to {margin-left: 90%;}
}

@-webkit-keyframes slide {
    to {margin-left: 90%;}
}

@-ms-keyframes slide {
    to {margin-left: 90%;}
}

@-o-keyframes slide {
    to {margin-left: 90%;}
}

#content {
    display: none;
    text-align: center;
}