Use qlik loader in mashup

[jasonmomoa]

Hello everyone,

I've been trying to replicate the inner Qlik Sense rain loader (sorry for the low quality gif) from the hub into a mashup.

I've tried a couple of things using the classes in client.css and qlik.js file with no luck.

Has anyone tried that before? Any help on this will be much appreciated!

Regards,

[Francis_Kabinoff · Accepted solution]

Yep, I did it here https://webapps.qlik.com/time/Time.html

All ya need to do is copy and paste the html. Since the html disappears once the page is loaded, you'll have to set a breakpoint on the js or interrupt the page load otherwise, then go copy the html. Also, I've copied and pasted the code used in the November release below. I don't think that it changes much version to version, as the example above is still working and is from like Qlik Sense 2.0 or something, but be aware it's definitely not supported and may break on future releases.

<div class="rain rain-loader qv-block-ui ng-scope" ng-class="{'qv-fade-out': fadeOut, 'qv-transparent-background': transparentBackground}" tid="3e1f54">
<div class="qv-animate progress-loader qv-loader-container qv-fade-in-add qv-loader-huge qv-fade-in qv-fade-in-add-active" ng-class="ngClasses" data-ng-animate="2" style="">
<div class="one">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205c-26.7,0-51.8-10.4-70.7-29.3C15.4,156.8,5,131.7,5,105s10.4-51.8,29.3-70.7C53.2,15.4,78.3,5,105,5 c55.1,0,100,44.9,100,100S160.1,205,105,205z M105,23.7c-44.8,0-81.3,36.5-81.3,81.3c0,44.8,36.5,81.3,81.3,81.3 c44.8,0,81.3-36.5,81.3-81.3C186.3,60.2,149.8,23.7,105,23.7z"></path>
</g>
</svg>
</div>
<div class="two">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205C49.9,205,5,160.1,5,105C5,49.9,49.9,5,105,5c55.1,0,100,44.9,100,100C205,160.1,160.1,205,105,205z M105,19.4c-47.2,0-85.6,38.4-85.6,85.6c0,47.2,38.4,85.6,85.6,85.6c47.2,0,85.6-38.4,85.6-85.6C190.6,57.8,152.2,19.4,105,19.4z"></path>
</g>
</svg>
</div>
<div class="three">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205c-26.7,0-51.8-10.4-70.7-29.3C15.4,156.8,5,131.7,5,105s10.4-51.8,29.3-70.7C53.2,15.4,78.3,5,105,5 c55.1,0,100,44.9,100,100S160.1,205,105,205z"></path>
</g>
</svg>
</div>
<div class="four">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205C49.9,205,5,160.1,5,105C5,49.9,49.9,5,105,5c55.1,0,100,44.9,100,100C205,160.1,160.1,205,105,205z M105,19.4c-47.2,0-85.6,38.4-85.6,85.6c0,47.2,38.4,85.6,85.6,85.6c47.2,0,85.6-38.4,85.6-85.6C190.6,57.8,152.2,19.4,105,19.4z"></path>
</g>
</svg>
</div>
<div class="five">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105 205C49.9 205 5 160.1 5 105C5 49.9 49.9 5 105 5c55.1 0 100 44.9 100 100C205 160.1 160.1 205 105 205z M105 10.5c-52.1 0-94.5 42.4-94.5 94.5c0 52.1 42.4 94.5 94.5 94.5c52.1 0 94.5-42.4 94.5-94.5C199.5 52.9 157.1 10.5 105 10.5z"></path>
</g>
</svg>
</div>
<div class="six">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205c-26.7,0-51.8-10.4-70.7-29.3C15.4,156.8,5,131.7,5,105s10.4-51.8,29.3-70.7C53.2,15.4,78.3,5,105,5 c55.1,0,100,44.9,100,100S160.1,205,105,205z"></path>
</g>
</svg>
</div>
<div class="seven">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 210 210" xml:space="preserve">
<g>
<path class="path" d="M105,205C49.9,205,5,160.1,5,105C5,49.9,49.9,5,105,5c55.1,0,100,44.9,100,100C205,160.1,160.1,205,105,205z M105,19.4c-47.2,0-85.6,38.4-85.6,85.6c0,47.2,38.4,85.6,85.6,85.6c47.2,0,85.6-38.4,85.6-85.6C190.6,57.8,152.2,19.4,105,19.4z"></path>
</g>
</svg>
</div>
</div>
<!-- ngIf: messageObj --><div class="qv-loader-text ng-scope qv-loader-huge qv-fade-in" ng-if="messageObj" ng-class="ngClasses">
<div ng-show="messageObj.task" q-translation="" class="ng-hide"></div>
<div ng-show="messageObj.message" q-translation="" class="ng-hide"></div>
</div><!-- end ngIf: messageObj -->
</div>

[jasonmomoa]

Hi fka‌,

Thank you for the prompt response. I'll defenitely try this out! Thank your for your feedback.

I'll let you know about the outcome

[jasonmomoa]

fka , it worked like a charm.

I already had a timeout in my web app for my custom spinner so I didn't need to modify anything apart from the messageObj.message.

I will keep an eye on it if it breaks from release to release.

Thank you very much, sir!