<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 panel-default"> <div class="panel-heading"> <h4 class="panel-title"> Fahrzeugsuche </h4> </div> <div class="panel-body"> <div id="carsearch-mobile" class="tab-pane" data-src="http://darmas.dotzilla-web.de/Iframes/Schnellsuche"> <div id="carsearch-sidebar-loader" class="carsearch-loader"> <div class="spinner-sm spinner-sm-1"></div> </div> <iframe id="carsearch-sidebar" src="" class="carsearch-iframe" frameborder="0" width="100%" height="320px" scrolling="no"></iframe> </div> </div> </div>

.spinner-sm { width: 50px; height: 50px; background-image: url(../images/icon_darmas_white.png); background-size: 40%; background-position: center center; background-repeat: no-repeat; background-color: @brand-primary; border-radius: 50%; position: relative; margin-bottom: 100px; display: inline-block; &:after, &:before { content:''; display: block; width: 60px; height: 60px; border-radius: 50%; } } .spinner-sm-1:after { position: absolute; top: -5px; left: -5px; border: 3px solid transparent; border-top-color: @brand-primary; border-bottom-color: @brand-primary; animation: spinny 1s linear infinite; } .spinner { top: 70px; width: 100px; height: 100px; background-image: url(../images/icon_darmas_white.png); background-size: 50%; background-position: center center; background-repeat: no-repeat; background-color: @brand-primary; border-radius: 50%; position: relative; margin-left: auto; margin-right: auto; &:after, &:before { content:''; display: block; width: 110px; height: 110px; border-radius: 50%; } } .spinner-1:after { position: absolute; top: -5px; left: -5px; border: 4px solid transparent; border-top-color: @brand-primary; border-bottom-color: @brand-primary; animation: spinny 800ms linear infinite; } @keyframes spinny { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } @keyframes spinny { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }

$(document).ready(function(){ // if the iframe hasn't already been loaded once src = $('#carsearch-mobile').attr("data-src"), windowWidth = $(window).width(); console.log(windowWidth); if (windowWidth > 1000) { $('#carsearch-sidebar').attr('src',src); } });