This page uses media queries and fixed breakpoints. By default the width isn't defined (page will use full width), on screens greater than 992px the width is set to 940px and above and 1100px the width is set to 1024px. Simulating a typical setup for a mobile first approach with breakpoints for larger screens/devices.
Since magic iframe uses a normal iframe to render content, the media query rules will be applied according to the size of the magic iframe and not the viewport width.
By default urls passed to the component will be sanitized using this library to prevent malicious code from being injected to the iframe. If you want to use something else or implement your own logic, sanitation can be turned off by setting sanitizeSource to false, please note that disabling this features makes your app vulnerable to XSS.
Just add the html for your loader between the seb-magic-iframe element tags to show a custom loader while the iframe is waiting for it's content to load e.g.
<seb-magic-iframe source="/some-content.html">
<div class="you-custom-loader"></div>
</seb-magic-iframe>