Ionic 2 custom svg spinner in loader

Question

I am trying to add my SVG to the loading create function but when I go to view it all I see is an empty tag where it should be.

let loading = this.loadingCtrl.create({spinner: ' ',
            content: this.appConfig.customSpinner })

Above is my create code and that variable is hte code below for the SVG.

<svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2419 1188.4">
   <defs>
    <mask id="mask">
       <path fill="#000" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/>

  <path fill="#000" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/>
  <path fill="#000" d="M581.4 718h206v131.1h-206z"/>

    <circle fill="#fff" cx="0" cy="1450" r="551.3"/>
    </mask>
  </defs>
  <style> 
    .st2{fill:none;stroke-width:40;stroke-miterlimit:10;}
  </style>


 <path id="background" mask="url(#mask)" fill="#F16E18" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/>

  <path class="letter" mask="url(#mask)" fill="#fff" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/>
  <path class="letter" mask="url(#mask)" fill="#fff" d="M581.4 718h206v131.1h-206z"/>

  <path  id="hexagon-2" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/>

    <path  id="hexagon-1" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/>

</svg>

How can I get it to render? I have also replicated it to the ionic forum on this link

I have tried to add a pipe that will make it safe in run time but that also fails.

I made the content this:

<div [innerHTML]='appConfig.customSpinner | safe'></div>

And this is my pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html:any):any {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

I have also tried with using a file:

let loading = this.loadingCtrl.create({spinner: 'hide', content:"<object data='assets/spinner.svg' type='image/svg+xml'></object>"})

This still causes the same issue.

NB**

After changing my code I realised that you cannot assign the return value from the sanitizer inside the variable but rather a declared variable in the class. One I did this I no longer got the TS type error and the svg XML loaded.

I have tried to use sanitizer on this problem and it still throws the same issue. I think its because the content is not binded to an element and rather appended. — Ross Rawlins, May 23 '17 at 06:43
Hi again Ross. I have a working example here: https://github.com/karma-emprendedor/svg-loading-controller The error you mentioned does not appears. Could you provide a codepen, git, plunker, etc with the error reproduced? — Pablo Albaladejo, May 25 '17 at 09:24

Pablo Albaladejo · Accepted Answer · 2017-05-25T09:21:29.157

4

The spinner content must be 'safe html', i.e. you must use bypassSecurityTrustHtml. In your case try using:

let loading = this.loadingCtrl.create({spinner: ' ',
        content: this.sanitizer.bypassSecurityTrustHtml(this.appConfig.customSpinner)
})

Check this related question.

This is my working code for html5 spinner at Ionic 3 app:

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){

getProgressBar(percentaje) {
    let html: string =  '<span style="text-align: center">Loading...'
    + Math.round(percentaje)+'%</span>'
    + '<br><progress value="' + percentaje + '" max="100"></progress>';
    return this.sanitizer.bypassSecurityTrustHtml(html);
    }

doSomething(){

    let loading = this.loadingCtrl.create({
       spinner: 'hide',
    });
    loading.data.content = this.getProgressBar(0);
    loading.present();

   //some stuff

   loading.data.content = this.getProgressBar(progress);
   }
}

Hope it helps.

Update using svg:

let svg = `<svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
          </svg>`;

this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);

let loading = this.loadingCtrl.create({
  spinner: 'hide',
  content: this.safeSvg,
});
loading.present();

The working code can be found at this git repository

edited May 25 '17 at 09:21

answered May 22 '17 at 11:06

Pablo Albaladejo

2,950
1
17
21

Because the function s expecting a string I have to convert it and when I do I still see nothing in my view. Is there a step I am missing? I see in my HTML the message {"changingThisBreaksApplicationSecurity":" – Ross Rawlins May 22 '17 at 11:37
Are you sure if the svg is ok? Maybe the problem is there. Can you provide a Plunker with the svg? I have just do it by doing copy&paste from your question and nothing is displayed. – Pablo Albaladejo May 22 '17 at 11:42
I added the link of my original codepen. But not sure where the issue could be. – Ross Rawlins May 22 '17 at 12:24
I think there is something 'unsafe' at your svg. I have do some testing with a basic svg, and it works. I have added an updated to my awnser with the code, could you test it at your project? – Pablo Albaladejo May 22 '17 at 16:48
1

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). I still get that in the console. Is there a correct way to make the SVG safe? – Ross Rawlins May 22 '17 at 18:25
Your code is correct the problem was I was not declaring safeSVG outside of the function I was assigning it to a variable in the function and then using that in the loading. – Ross Rawlins May 25 '17 at 10:57
This does not work for me in Ionic3 as of today. The issue is that the `SafeHtml` is not a `string`. My company’s standards are to type everything (enforced by TSLint). The `content` option of `LoadingController.create()` takes only a `string`. I’ve even tried converting the SafeHtml with `.toString()`. The rest of the HTML I have surrounding the SVG renders just fine, but the SVG shows up as an error that (in the HTML itself) that the sanitized HTML must be used as innerHtml="sanitizedHtml" (or something of that effect). – Russ Mar 06 '18 at 15:09
I finally got it to work with an SVG. Using Angular 5.2.0, TypeScript 2.7.1 and Ionic 3.19.1, I had to change this: ` const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(html); ` to this: ` const safeHtml: any = this.sanitizer.bypassSecurityTrustHtml(html); // Need "any" here to coax the SafeHtml into a string for "content" property ` – Russ Mar 06 '18 at 17:23

score 0 · Answer 2 · answered Dec 06 '17 at 10:18

you can also overwrite the loader styles in "src/theme/variables.scss" e.g.

    ion-loading {
        ion-backdrop {
            background-color: white !important;
        }
        .loading-wrapper {
            justify-content: center !important;
            opacity: 0.8 !important;
            background-color: white !important;
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        .spinner-crescent circle {
            stroke: green !important;
        }

        .spinner-ios line,
        .spinner-ios-small line {
            stroke: green !important;
        }
    }

Ionic 2 custom svg spinner in loader

2 Answers2

Linked