#loading{

    background: #333;

    color: #fff;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    position: fixed;

    z-index: 5;

    width: 100%;

    height: 100%;

    background: #333;

    display: none;

}

#loading h3{
top: 60%;
left: 50%;
z-index: 7;
position: fixed;
display: block;
transform: translateX(-50%);
}

.loadingStyle{
z-index: 6;
display: flex;
justify-content: space-around;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: fixed;
width: 70%;
height: 70%;
}

.loadingStyle-bar{
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
animation-name: bounding;
animation-duration: 1.8s;
animation-iteration-count: infinite;
}

.loadingStyle-bar:nth-child(1){
left: 5%;
animation-delay: 0s;
}

.loadingStyle-bar:nth-child(2){
left: 50%;
animation-delay: 0.4s;
}

.loadingStyle-bar:nth-child(3){
left: 95%;
animation-delay: 0.8s;
}

@keyframes bounding{
0%{
width: 20px;
height: 20px;
}

50%{
width: 50px;
height: 50px;
}

100%{
width: 20px;
height: 20px;
}
}