3 Replies Latest reply: Feb 2, 2018 4:38 AM by Xavier Garcia RSS

    Use qlik loader in mashup

    Xavier Garcia

      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,

        • Re: Use qlik loader in mashup
          Francis Kabinoff

          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>