bascic loading for iframe

dabblet.css

/* bascic loading for iframe */
.ifrHold {display:table;margin:3em auto;position:relative;border:solid;
background:linear-gradient(0deg,turquoise,purple);}
.ifrHold:before {content:"LOADING";position:absolute;width:100%;text-align:center;top:40%;font-size:4em;}
iframe {width:900px;height:600px;opacity:1;animation: 10s showifr;position:relative;z-index:1}
@keyframes showifr {
0% {opacity:0}
100% {opacity:1;}
}

dabblet.html

<h1>Rafrichir la page pour relancer l'animation/chargement de l'iframe, ou modifier le html</h1>
<p>test avec ajout d'une animation si le chargement de l'iframe est trop rapide a l'ouverture de la page.</p>
<div class="ifrHold">
	<iframe src="http://dabblet.com/help/index.html">
	</iframe>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}