fix(image-loader-spinner): make spinner responsive and use svg

Author: ihadeed

src/components/image-loader-spinner/image-loader-spinner.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
-// TODO make the spinner responsive so it doesn't cause small containers to expand
-
 /**
  * This is the spinner component that shows up when the image is loading.
  */
 @Component({
   selector: 'image-loader-spinner',
-  styles: ['@-webkit-keyframes image-loader-animation{0%{opacity:1}100%{opacity:0}}@keyframes image-loader-animation{0%{opacity:1}100%{opacity:0}}.image-loader-spinner{position:relative;background:0 0;width:200px;height:200px;margin:auto;transform:scale(.25)}.image-loader-spinner>div{-webkit-animation:image-loader-animation .8s linear infinite;animation:image-loader-animation .8s linear infinite;top:80px;left:97px;width:6px;height:40px;background:#9c9c9c;border-radius:4px;position:absolute}.image-loader-spinner>div:nth-of-type(1){-webkit-animation-delay:-.4s;animation-delay:-.4s;-webkit-transform:rotate(0) translate(0,-60px);transform:rotate(0) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(2){-webkit-animation-delay:-.35000000000000003s;animation-delay:-.35000000000000003s;-webkit-transform:rotate(22deg) translate(0,-60px);transform:rotate(22deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(3){-webkit-animation-delay:-.30000000000000004s;animation-delay:-.30000000000000004s;-webkit-transform:rotate(45deg) translate(0,-60px);transform:rotate(45deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(4){-webkit-animation-delay:-.25s;animation-delay:-.25s;-webkit-transform:rotate(67deg) translate(0,-60px);transform:rotate(67deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(5){-webkit-animation-delay:-.2s;animation-delay:-.2s;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(6){-webkit-animation-delay:-.15000000000000002s;animation-delay:-.15000000000000002s;-webkit-transform:rotate(112deg) translate(0,-60px);transform:rotate(112deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(7){-webkit-animation-delay:-99.99999999999997ms;animation-delay:-99.99999999999997ms;-webkit-transform:rotate(135deg) translate(0,-60px);transform:rotate(135deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(8){-webkit-animation-delay:-.04999999999999999s;animation-delay:-.04999999999999999s;-webkit-transform:rotate(157deg) translate(0,-60px);transform:rotate(157deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(9){-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(10){-webkit-animation-delay:.04999999999999999s;animation-delay:.04999999999999999s;-webkit-transform:rotate(202deg) translate(0,-60px);transform:rotate(202deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(11){-webkit-animation-delay:99.99999999999997ms;animation-delay:99.99999999999997ms;-webkit-transform:rotate(225deg) translate(0,-60px);transform:rotate(225deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(12){-webkit-animation-delay:.15000000000000002s;animation-delay:.15000000000000002s;-webkit-transform:rotate(247deg) translate(0,-60px);transform:rotate(247deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(13){-webkit-animation-delay:.20000000000000007s;animation-delay:.20000000000000007s;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(14){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-transform:rotate(292deg) translate(0,-60px);transform:rotate(292deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(15){-webkit-animation-delay:.30000000000000004s;animation-delay:.30000000000000004s;-webkit-transform:rotate(315deg) translate(0,-60px);transform:rotate(315deg) translate(0,-60px)}.image-loader-spinner>div:nth-of-type(16){-webkit-animation-delay:.35s;animation-delay:.35s;-webkit-transform:rotate(337deg) translate(0,-60px);transform:rotate(337deg) translate(0,-60px)}'],
-  template: '<div class="image-loader-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>'
+  template: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(0 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(22.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.046875s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(45 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.09375s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(67.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.140625s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(90 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.1875s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(112.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.234375s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(135 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.28125s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(157.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.328125s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(180 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.375s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(202.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.421875s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(225 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.46875s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(247.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.515625s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(270 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.5625s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(292.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.609375s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(315 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.65625s" repeatCount="indefinite"/></rect><rect x="49" y="42" width="2" height="16" rx="0" ry="0" fill="#9C9C9C" transform="rotate(337.5 50 50) translate(0 -25)"><animate attributeName="opacity" from="1" to="0" dur=".75s" begin="0.703125s" repeatCount="indefinite"/></rect></svg>`,
+  styles: [
+    'svg {max-width: 200px; margin: auto; float: none; display: block;}'
+  ]
 })
-export class ImageLoaderSpinner {}
+export class ImageLoaderSpinner { }