<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--<div class="card effect-1"> <div class="hover-rect lighteryellow"></div> </div>--> <div class="loader"> <div class="pile small"></div> <div class="pile middle"></div> <div class="pile big"></div> <div class="loader-text">Lade Daten..</div> </div> <div class="loader-back"></div>

div.loader { background-color: transparent; height: auto; min-height: 40px; /* vertical-align:bottom; */ position: absolute; top: 48%; left: 48%; z-index: 10000; } div.loader .pile { transform: skew(-45deg); transform-origin: 100% 100%; background-color: #999; width: 15px; border-radius: 1px; display: inline-block; /*position:relative; bottom:0; left:auto; vertical-align:bottom;*/ } div.loader .pile.small { animation: pile1 0.3s 0.4s ease 1 forwards, fadein2 1s 1s linear infinite; } div.loader .pile.middle { /*height:25px; background-color:#F6CA6B;*/ animation: pile2 0.4s 0.2s ease 1 forwards, fadein2 1s 1.2s linear infinite; } div.loader .pile.big { /*height:40px; background-color:#F3AE02;*/ animation: pile3 0.5s ease 1 forwards, fadein2 1s 1.4s linear infinite; } div.loader .loader-text { color: #fff; opacity: 0; animation: fadein 0.3s 0.6s ease 1 forwards; } .loader-back { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #9A1A42; opacity: 0.95; box-shadow: inset 0 0 75px 0 rgba(0, 0, 0, 0.4); } @keyframes pile1 { 0% { height: 0; } 100% { height: 13px; background-color: #FCEFD5; } } @keyframes pile2 { 0% { height: 0; } 100% { height: 25px; background-color: #F6CA6B; } } @keyframes pile3 { 0% { height: 0; } 100% { height: 40px; background-color: #F3AE02; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein2 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }