Merge pull request #11 from kreatemore/8_bugfix-ios-rendering

#8 Fixing rendering on iOS devices
ngneat · Jun 27, 2018 · ddc4369 · ddc4369
2 parents b71d908 + e91db06
commit ddc4369
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,8 @@ export class AppModule { }
 |preserveAspectRatio|string|`'xMidYMid meet'`||
 |primaryColor|string|`'#f9f9f9'`||
 |secondaryColor|string|`'#ecebeb'`||
+|primaryOpacity|number|`1`||
+|secondaryOpacity|number|`1`||
 |uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
 
 ## Credits

diff --git a/src/lib/src/content-loader.component.html b/src/lib/src/content-loader.component.html
@@ -11,20 +11,20 @@
 
 		<linearGradient [attr.id]="idGradient">
 
-			<stop offset="0%" [attr.stop-color]="primaryColor">
-				<animate attributeName="offset" values="-2; 1" attr.dur={{speed}}s repeatCount="indefinite" />
-			</stop>
+      <stop offset="0%" [attr.stop-color]="primaryColor" [attr.stop-opacity]="primaryOpacity">
+        <animate attributeName="offset" values="-2; 1" attr.dur={{speed}}s repeatCount="indefinite" />
+      </stop>
 
-			<stop offset="50%" [attr.stop-color]="secondaryColor">
-				<animate attributeName="offset" values="-1.5; 1.5" attr.dur={{speed}}s repeatCount="indefinite" />
-			</stop>
+      <stop offset="50%" [attr.stop-color]="secondaryColor" [attr.stop-opacity]="secondaryOpacity">
+        <animate attributeName="offset" values="-1.5; 1.5" attr.dur={{speed}}s repeatCount="indefinite" />
+      </stop>
 
-			<stop offset="100%" [attr.stop-color]="primaryColor">
-				<animate attributeName="offset" values="-1; 2" attr.dur={{speed}}s repeatCount="indefinite" />
-			</stop>
+      <stop offset="100%" [attr.stop-color]="primaryColor" [attr.stop-opacity]="primaryOpacity">
+        <animate attributeName="offset" values="-1; 2" attr.dur={{speed}}s repeatCount="indefinite" />
+      </stop>
 
 		</linearGradient>
 
 	</defs>
 
-</svg>
+</svg>
diff --git a/src/lib/src/content-loader.component.ts b/src/lib/src/content-loader.component.ts
@@ -17,6 +17,8 @@ export class ContentLoaderComponent {
   @Input() preserveAspectRatio = 'xMidYMid meet';
   @Input() primaryColor = '#f9f9f9';
   @Input() secondaryColor = '#ecebeb';
+  @Input() primaryOpacity = 1;
+  @Input() secondaryOpacity = 1;
   @Input() uniqueKey;
   idClip = uid();
   idGradient = uid();