<div x-data="{ loaded: true }">
<div x-show="loaded">
I've been Loaded
</div>
<div x-show="!loaded">
Loading...
</div>
</div>
[x-cloak] { display: none; }
setTimeout(function(){
var scriptTag = document.createElement('script');
scriptTag.src = 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js';
document.head.appendChild(scriptTag);
}, 2000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.