Ion-spinner styling in ionic 2

Hi, I am trying to create a custom ion-spinner in Ionic 2.
Here’s what I have so far:

presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: ‘hide’,
content: <div class="loader"> <svg class="circular"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></svg></div> </div>,
duration: 5000,
cssClass: `
.loader {
position: relative;
zoom: 1.7;
}

            .circular {
                -webkit-animation: rotate 2s linear infinite;
                animation: rotate 2s linear infinite;
                height: 100px;
                position: relative;
                width: 100px;
            }

            .path {
                stroke-dasharray: 1,200;
                stroke-dashoffset: 0;
                -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
                animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
                stroke-linecap: round;
            }

            @-webkit-keyframes rotate {
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }

            @keyframes rotate {
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes dash {
                0% {
                    stroke-dasharray: 1,200;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -124;
                }
            }

            @keyframes dash {
                0% {
                    stroke-dasharray: 1,200;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -124;
                }
            }

            @-webkit-keyframes color {
                100%, 0% {
                    stroke: #d62d20;
                }
                40% {
                    stroke: #0057e7;
                }
                66% {
                    stroke: #008744;
                }
                80%, 90% {
                    stroke: #ffa700;
                }
            }

            @keyframes color {
                100%, 0% {
                    stroke: #d62d20;
                }
                40% {
                    stroke: #0057e7;
                }
                66% {
                    stroke: #008744;
                }
                80%, 90% {
                    stroke: #ffa700;
                }
            }
        `
    });

    loading.present();
}

When I click the button which calls presentLoadingCustom(), the spinner doesn’t show up.
Please help.