CSS
body {
background-color: #68C3A3;
}
.loading-panel-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading-panel {
display: table;
width: 200px;
height: 80px;
padding: 0px 30px;
background-color: #ddd;
border-radius: 10px;
-webkit-box-shadow: inset 0px 2px 0px 0px rgba(238,238,238,1), 0px 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0px 2px 0px 0px rgba(238,238,238,1), 0px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 2px 0px 0px rgba(238,238,238,1), 0px 1px 1px rgba(0, 0, 0, 0.4);
animation: 2s bounce ease infinite;
}
.loading-panel span {
display: table-cell;
vertical-align: middle;
}
.loading-panel h3 {
color: #666;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat';
font-weight: bold;
}
.shadow {
position: absolute;
width: 175px;
height: 20px;
bottom: -20%;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: #464646;
opacity: 0.2;
transform-origin: -50% -50%;
animation: 2s pulsate ease infinite;
}
@keyframes bounce {
50% {
transform: translateY(-20px);
}
}
@keyframes pulsate {
0% {
opacity: 0;
}
50% {
transform: scale(0.5);
opacity: 0.2;
}
100% {
opacity: 0;
}
}
