From cc53c5f00134a403168f22d3a9e73db58f24c5d3 Mon Sep 17 00:00:00 2001
From: Fernando del olmo <fer.olmo92@gmail.com>
Date: Fri, 23 Feb 2018 13:14:08 +0100
Subject: [PATCH] feat(): Add animation on skeleton text

---
 .../core/src/components/skeleton-text/readme.md  | 10 ++++++++++
 .../components/skeleton-text/skeleton-text.scss  | 16 ++++++++++++++++
 .../components/skeleton-text/skeleton-text.tsx   |  4 ++--
 .../skeleton-text/test/basic/index.html          |  1 +
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/skeleton-text/readme.md b/packages/core/src/components/skeleton-text/readme.md
index 4df3d084d96..8c1040e7476 100644
--- a/packages/core/src/components/skeleton-text/readme.md
+++ b/packages/core/src/components/skeleton-text/readme.md
@@ -7,6 +7,11 @@
 
 ## Properties
 
+#### animated
+
+boolean
+
+
 #### width
 
 string
@@ -14,6 +19,11 @@ string
 
 ## Attributes
 
+#### animated
+
+boolean
+
+
 #### width
 
 string
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.scss b/packages/core/src/components/skeleton-text/skeleton-text.scss
index 4347721dc99..c9799c1a796 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.scss
+++ b/packages/core/src/components/skeleton-text/skeleton-text.scss
@@ -18,3 +18,19 @@ ion-skeleton-text span {
 
   font-size: 8px;
 }
+
+ion-skeleton-text.animated {
+  animation: shine 1s infinite;
+}
+
+@keyframes shine {
+  to {
+    background-position:
+      0 0,
+      100% 0,
+      120px 0,
+      120px 40px,
+      120px 80px,
+      120px 120px;
+  }
+}
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.tsx b/packages/core/src/components/skeleton-text/skeleton-text.tsx
index eea5acfca8b..e200517718f 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/packages/core/src/components/skeleton-text/skeleton-text.tsx
@@ -13,8 +13,8 @@ import { Component, Prop } from '@stencil/core';
 })
 export class SkeletonText {
   @Prop() width = '100%';
-
+  @Prop() animated = false;
   render () {
-    return <span style={{width: this.width}}>&nbsp;</span>;
+    return <span style={{width: this.width}} class={this.animated ? 'animated' : ''}>&nbsp;</span>;
   }
 }
diff --git a/packages/core/src/components/skeleton-text/test/basic/index.html b/packages/core/src/components/skeleton-text/test/basic/index.html
index 7dcf3ec8f4b..e7ed9944b56 100644
--- a/packages/core/src/components/skeleton-text/test/basic/index.html
+++ b/packages/core/src/components/skeleton-text/test/basic/index.html
@@ -12,6 +12,7 @@
   <ion-skeleton-text width=600px></ion-skeleton-text>
   <ion-skeleton-text width=100px></ion-skeleton-text>
   <ion-skeleton-text width=80px></ion-skeleton-text>
+  <ion-skeleton-text animated="true" width=80px></ion-skeleton-text>
 </body>
 </html>