Loading Animation

index.html

<div class="loading-panel-wrap">
    <div class="loading-panel">
        <span><h3>Loading</h3></span> 
    </div>
    <div class="shadow"></div>
</div>

Loading Animation.markdown

Loading Animation

A Pen by Jack Doyle on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

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;
    }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />