Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

jasonmomoa
Contributor

Use qlik loader in mashup

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,

1 Solution

Accepted Solutions
Employee
Employee

Re: Use qlik loader in mashup

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>

3 Replies
Employee
Employee

Re: Use qlik loader in mashup

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
Contributor

Re: Use qlik loader in mashup

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
Contributor

Re: Use qlik loader in mashup

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!

Community Browser