<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="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="btn btn-primary">Feedback form</button> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div id="carsearch-mobile" data-src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1477413845934!6m8!1m7!1sdnK7KCRD21wAAAQo8X6xJA!2m2!1d51.48150236104869!2d7.142771589600898!3f359!4f0!5f0.7820865974627469" class="tab-pane"> <div id="carsearch-loader" class="wrap-loading"> <div class="loading loading-3"></div> </div> <iframe id="carsearch-sidebar" src="" class="carsearch-iframe" frameborder="0" width="100%" height="320px" scrolling="no"></iframe> </div> </div> </div> </div>

@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } html, body { height: 100%; } .row { height: 300px; } .wrap-loading { background: #333; width: 100%; height: 100%; position: relative; } .loading { border-radius: 50%; position: absolute; top: 50%; left: 50%; animation: spin 750ms infinite linear; -webkit-animation: spin 750ms infinite linear; -moz-animation: spin 750ms infinite linear; -o-animation: spin 750ms infinite linear; -ms-animation: spin 750ms infinite linear; } .loading-1 { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; border: 2px solid #ebebeb; border-top-color: #333; } .loading-2 { margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; border: 3px solid #ebebeb; border-top-color: #333; } .loading-3 { margin-top: -25px; margin-left: -25px; width: 50px; height: 50px; border: 3px solid #ebebeb; border-top-color: #333; } .loading-4 { margin-top: -35px; margin-left: -35px; width: 70px; height: 70px; border: 4px solid #ebebeb; border-top-color: #333; } #carsearch-mobile .wrap-loading { background: #ebebeb; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .panel-body { position: relative; background-color: #ebebeb; }

$('#collapseTwo').on('shown.bs.collapse', function () { // if the iframe hasn't already been loaded once // src = "http://darmas.dotzilla-web.de/Iframes/Schnellsuche"; src = $("#carsearch-mobile").attr("data-src"); if ($("#carsearch-sidebar").attr("src")=="") { $("#carsearch-sidebar").attr("src",src); } $('#carsearch-sidebar').on('load', function () { $('#carsearch-loader').fadeOut(400, function () { $('#carsearch-sidebar').fadeTo(400, 1); }); }); });