diff --git a/exports/skeleton.d.ts b/exports/skeleton.d.ts
new file mode 100644
index 000000000..58fa5d8f9
--- /dev/null
+++ b/exports/skeleton.d.ts
@@ -0,0 +1 @@
+export * from './components/skeleton/Skeleton';
\ No newline at end of file
diff --git a/exports/skeleton.js b/exports/skeleton.js
new file mode 100644
index 000000000..1e3950219
--- /dev/null
+++ b/exports/skeleton.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/skeleton/Skeleton.vue');
\ No newline at end of file
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 6f0955756..ddf371742 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #64B5F6;
   color: #212529;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 900680f89..bb45177c7 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #81C784;
   color: #212529;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index f14a7412a..21de482d7 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #FFD54F;
   color: #212529;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 1330550b1..03171a7f9 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #BA68C8;
   color: #ffffff;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index e8d00ae8d..607a480bb 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4423,6 +4423,14 @@
   color: #151515;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #8dd0ff;
   color: #151515;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 1b8b152c3..b29cc2c26 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -4423,6 +4423,14 @@
   color: #151515;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #c298d8;
   color: #151515;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 7654d6246..0566eeb0f 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -4423,6 +4423,14 @@
   color: #efefef;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #007bff;
   color: #ffffff;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index e98301e2a..d2075e44d 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -4423,6 +4423,14 @@
   color: #efefef;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #883cae;
   color: #ffffff;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index cc19a91bb..bd03f8ebf 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -4362,6 +4362,14 @@
   color: #faf9f8;
 }
 
+.p-skeleton {
+  background-color: #edebe9;
+  border-radius: 2px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #0078d4;
   color: #ffffff;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index f9ea72693..0889c4cbe 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -4374,6 +4374,14 @@
   color: #212529;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #FFE082;
   color: #212529;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 17eb03d8e..3cc946cbb 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -4374,6 +4374,14 @@
   color: #212529;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #81D4FA;
   color: #212529;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index da38df606..4469547f0 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -4374,6 +4374,14 @@
   color: #212529;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #C5E1A5;
   color: #212529;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index cfdd6386e..59bdb6783 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -4374,6 +4374,14 @@
   color: #212529;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #F48FB1;
   color: #212529;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 9f3e64551..0005ddde2 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -4435,6 +4435,14 @@
   color: #121212;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #CE93D8;
   color: #121212;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 63660d621..a9bd391ca 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -4435,6 +4435,14 @@
   color: #121212;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #9FA8DA;
   color: #121212;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 92a97af2e..76aff7abc 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #673AB7;
   color: #ffffff;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 3863c0241..4ed1de3fe 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #3F51B5;
   color: #ffffff;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 5c1f290bf..5a70691dd 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #673AB7;
   color: #ffffff;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 5d26502e7..b3f9b6a56 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #3F51B5;
   color: #ffffff;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 9d11ea875..4208b05ec 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #673AB7;
   color: #ffffff;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index b4c023b21..1d070602c 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -4435,6 +4435,14 @@
   color: #ffffff;
 }
 
+.p-skeleton {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #3F51B5;
   color: #ffffff;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index f9c9d04e8..670ade742 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -4362,6 +4362,14 @@
   color: #f4f4f4;
 }
 
+.p-skeleton {
+  background-color: #eaeaea;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #007ad9;
   color: #ffffff;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index c715c696d..a7fceb38a 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -4374,6 +4374,14 @@
   color: #f4f4f4;
 }
 
+.p-skeleton {
+  background-color: #eaeaea;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #007ad9;
   color: #ffffff;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 518909206..91b0ea38b 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -4374,6 +4374,14 @@
   color: #f4f4f4;
 }
 
+.p-skeleton {
+  background-color: #eaeaea;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #41b883;
   color: #ffffff;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f33337e0f..f048a9e06 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -4374,6 +4374,14 @@
   color: #f4f4f4;
 }
 
+.p-skeleton {
+  background-color: #eaeaea;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #007ad9;
   color: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 1aca75597..51eb28057 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -4362,6 +4362,14 @@
   color: #f4f4f4;
 }
 
+.p-skeleton {
+  background-color: #dadada;
+  border-radius: 2px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #7B95A3;
   color: #ffffff;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 96cabcb2e..1c239ea06 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -4411,6 +4411,14 @@
   color: #f8f9fa;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #2196F3;
   color: #ffffff;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 386fcaf48..74fa4aad9 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -4411,6 +4411,14 @@
   color: #f8f9fa;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #4CAF50;
   color: #ffffff;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index ded613fb0..afbd0b18a 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -4411,6 +4411,14 @@
   color: #f8f9fa;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #FFC107;
   color: #212529;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 32aba7b17..843a4ec41 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -4411,6 +4411,14 @@
   color: #f8f9fa;
 }
 
+.p-skeleton {
+  background-color: #e9ecef;
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
 .p-tag {
   background: #9C27B0;
   color: #ffffff;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 71d78c6f6..5bcc5320b 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #64B5F6;
   color: #212529;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index e1e4f1103..6f6828d78 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #81C784;
   color: #212529;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 9da8b1c13..7959f2543 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #FFD54F;
   color: #212529;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 153ce640f..06d49037b 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -4411,6 +4411,14 @@
   color: rgba(255, 255, 255, 0.87);
 }
 
+.p-skeleton {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+}
+.p-skeleton:after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+}
+
 .p-tag {
   background: #BA68C8;
   color: #ffffff;
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 539746999..671538802 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -254,6 +254,7 @@
                 <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
+                <router-link to="/skeleton">Skeleton <Tag value="New"></Tag></router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>
                 <router-link to="/ripple">Ripple</router-link>
diff --git a/src/components/skeleton/Skeleton.d.ts b/src/components/skeleton/Skeleton.d.ts
new file mode 100644
index 000000000..7aa948d7b
--- /dev/null
+++ b/src/components/skeleton/Skeleton.d.ts
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+
+declare class Skeleton extends Vue {
+    shape?: string;
+    size?: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    animation?: string;
+}
+
+export default Skeleton;
\ No newline at end of file
diff --git a/src/components/skeleton/Skeleton.vue b/src/components/skeleton/Skeleton.vue
new file mode 100644
index 000000000..9a7ad8e81
--- /dev/null
+++ b/src/components/skeleton/Skeleton.vue
@@ -0,0 +1,84 @@
+<template>
+    <div :style="containerStyle" :class="containerClass"></div>
+</template>
+
+<script>
+export default {
+    props: {
+        shape: {
+            type: String,
+            default: 'rectangle'
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '1rem'
+        },
+        borderRadius: {
+            type: String,
+            default: null
+        },
+        animation: {
+            type: String,
+            default: 'wave'
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-skeleton p-component', {
+                'p-skeleton-circle': this.shape === 'circle',
+                'p-skeleton-animation-none': this.animation === 'none'
+            }];
+        },
+        containerStyle() {
+            if (this.size)
+                return {width: this.size, height: this.size, borderRadius: this.borderRadius};
+            else
+                return {width: this.width, height: this.height, borderRadius: this.borderRadius};
+        }
+    }
+}
+</script>
+
+<style>
+.p-skeleton {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-skeleton::after {
+    content: "";
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+   animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 569461443..a11ca3b6e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,7 @@ import Row from './components/row/Row';
 import ScrollPanel from './components/scrollpanel/ScrollPanel';
 import ScrollTop from './components/scrolltop/ScrollTop';
 import SelectButton from './components/selectbutton/SelectButton';
+import Skeleton from './components/skeleton/Skeleton';
 import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import SplitButton from './components/splitbutton/SplitButton';
@@ -177,6 +178,7 @@ app.component('ScrollTop', ScrollTop);
 app.component('SelectButton', SelectButton);
 app.component('Slider', Slider);
 app.component('Sidebar', Sidebar);
+app.component('Skeleton', Skeleton);
 app.component('SplitButton', SplitButton);
 app.component('Steps', Steps);
 app.component('TabView', TabView);
diff --git a/src/router/index.js b/src/router/index.js
index 58433ee37..248bb383f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -387,6 +387,11 @@ const routes = [
         name: 'scrolltop',
         component: () => import('../views/scrolltop/ScrollTopDemo.vue')
     },
+    {
+        path: '/skeleton',
+        name: 'skeleton',
+        component: () => import('../views/skeleton/SkeletonDemo.vue')
+    },
     {
         path: '/listbox',
         name: 'listbox',
diff --git a/src/views/skeleton/SkeletonDemo.vue b/src/views/skeleton/SkeletonDemo.vue
new file mode 100644
index 000000000..495f7c2e8
--- /dev/null
+++ b/src/views/skeleton/SkeletonDemo.vue
@@ -0,0 +1,171 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Skeleton</h1>
+                <p>Skeleton is a placeholder to display instead of the actual content.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                 <div class="p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rectangle</h5>
+                        <Skeleton class="p-mb-2"></Skeleton>
+                        <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                        <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                        <Skeleton width="10rem" height="4rem"></Skeleton>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>Rounded</h5>
+                        <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5 class="p-mt-3">Square</h5>
+                        <div class="p-d-flex p-ai-end">
+                            <Skeleton size="2rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="3rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                            <Skeleton size="5rem"></Skeleton>
+                        </div>
+                    </div>
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5 class="p-mt-3">Circle</h5>
+                        <div class="p-d-flex p-ai-end">
+                            <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="5rem"></Skeleton>
+                        </div>
+                    </div>
+                 </div>
+            </div>
+
+            <div class="card">
+                 <div class="p-grid p-formgrid">
+                    <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                        <h5>Card</h5>
+                        <div class="custom-skeleton p-p-4">
+                            <div class="p-d-flex p-mb-3">
+                                <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <div>
+                                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                    <Skeleton height=".5rem"></Skeleton>
+                                </div>
+                            </div>
+                            <Skeleton width="100%" height="150px"></Skeleton>
+                            <div class="p-d-flex p-jc-between p-mt-3">
+                                <Skeleton width="4rem" height="2rem"></Skeleton>
+                                <Skeleton width="4rem" height="2rem"></Skeleton>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-field p-col-12 p-md-6">
+                        <h5>List</h5>
+                        <div class="custom-skeleton p-p-4">
+                            <ul class="p-m-0 p-p-0">
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="p-mb-3">
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="p-d-flex">
+                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                        <div style="flex: 1">
+                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="75%"></Skeleton>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                 </div>
+
+                <h5>DataTable</h5>
+                <DataTable :value="products">
+                    <Column field="code" header="Code">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="name" header="Name">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="category" header="Category">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                    <Column field="quantity" header="Quantity">
+                        <template #body>
+                            <Skeleton></Skeleton>
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+
+        </div>
+
+        <SkeletonDoc />
+    </div>
+</template>
+
+<script>
+import SkeletonDoc from './SkeletonDoc';
+
+export default {
+    data() {
+        return {
+            products: new Array(5)
+        }
+    },
+    components: {
+        'SkeletonDoc': SkeletonDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-skeleton {
+    border: 1px solid var(--surface-d);
+    border-borderRadius: 4px;
+
+    ul {
+        list-style: none;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
new file mode 100644
index 000000000..f64e2a91f
--- /dev/null
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -0,0 +1,278 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Skeleton from 'primevue/skeleton';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Skeleton displays a rectangle in its simplest form.</p>
+<pre v-code>
+<code>
+&lt;Skeleton /&gt;
+
+</code></pre>
+
+				<h5>Circle</h5>
+				<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
+<pre v-code>
+<code>
+&lt;Skeleton shape="circle"/&gt;
+
+</code></pre>
+
+				<h5>Size</h5>
+				<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
+<pre v-code>
+<code>
+&lt;Skeleton width="100%" height="2rem" /&gt;
+&lt;Skeleton shape="circle" size="50px" /&gt;
+
+</code></pre>
+
+				<h5>Border Radius</h5>
+				<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
+<pre v-code>
+<code>
+&lt;Skeleton borderRadius="16px" /&gt;
+
+</code></pre>
+
+				<h5>Animation</h5>
+				<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
+<pre v-code>
+<code>
+&lt;Skeleton animation="none" /&gt;
+
+</code></pre>
+
+				<h5>Properties</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>shape</td>
+                                <td>string</td>
+                                <td>rectangle</td>
+                                <td>Shape of the element, options are "rectangle" and "circle".</td>
+                            </tr>
+							<tr>
+                                <td>size</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Size of the Circle or Square.</td>
+                            </tr>
+							<tr>
+                                <td>width</td>
+                                <td>string</td>
+                                <td>100%</td>
+                                <td>Width of the element.</td>
+                            </tr>
+							<tr>
+                                <td>height</td>
+                                <td>string</td>
+                                <td>1rem</td>
+                                <td>Height of the element.</td>
+                            </tr>
+							<tr>
+                                <td>borderRadius</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Border radius of the element, defaults to value from theme.</td>
+                            </tr>
+							<tr>
+                                <td>animation</td>
+                                <td>string</td>
+                                <td>wave</td>
+                                <td>Type of the animation, valid options are "wave" and "none".</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-skeleton</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-skeleton-circle</td>
+                                <td>Container element of a determinate progressbar.</td>
+                            </tr>
+                            <tr>
+                                <td>p-skeleton-animation-none</td>
+                                <td>Container element of an indeterminate progressbar.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;div class="card"&gt;
+	&lt;div class="p-grid p-formgrid"&gt;
+		&lt;div class="p-field p-col-12 p-md-6"&gt;
+			&lt;h5&gt;Rectangle&lt;/h5&gt;
+			&lt;Skeleton class="p-mb-2"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton height="2rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="10rem" height="4rem"&gt;&lt;/Skeleton&gt;
+		&lt;/div&gt;
+		&lt;div class="p-field p-col-12 p-md-6"&gt;
+			&lt;h5&gt;Rounded&lt;/h5&gt;
+			&lt;Skeleton class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="10rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="5rem" borderRadius="16px" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton height="2rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
+			&lt;Skeleton width="10rem" height="4rem" borderRadius="16px"&gt;&lt;/Skeleton&gt;
+		&lt;/div&gt;
+		&lt;div class="p-field p-col-12 p-md-6"&gt;
+			&lt;h5 class="p-mt-3"&gt;Square&lt;/h5&gt;
+			&lt;div class="p-d-flex p-ai-end"&gt;
+				&lt;Skeleton size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton size="5rem"&gt;&lt;/Skeleton&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+		&lt;div class="p-field p-col-12 p-md-6"&gt;
+			&lt;h5 class="p-mt-3"&gt;Circle&lt;/h5&gt;
+			&lt;div class="p-d-flex p-ai-end"&gt;
+				&lt;Skeleton shape="circle" size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton shape="circle" size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+				&lt;Skeleton shape="circle" size="5rem"&gt;&lt;/Skeleton&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+	&lt;div class="card"&gt;
+		&lt;div class="p-grid p-formgrid"&gt;
+		&lt;div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0"&gt;
+			&lt;h5&gt;Card&lt;/h5&gt;
+			&lt;div class="custom-skeleton p-p-4"&gt;
+				&lt;div class="p-d-flex p-mb-3"&gt;
+					&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+					&lt;div&gt;
+						&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+						&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+						&lt;Skeleton height=".5rem"&gt;&lt;/Skeleton&gt;
+					&lt;/div&gt;
+				&lt;/div&gt;
+				&lt;Skeleton width="100%" height="150px"&gt;&lt;/Skeleton&gt;
+				&lt;div class="p-d-flex p-jc-between p-mt-3"&gt;
+					&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
+					&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
+				&lt;/div&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class="p-field p-col-12 p-md-6"&gt;
+			&lt;h5&gt;List&lt;/h5&gt;
+			&lt;div class="custom-skeleton p-p-4"&gt;
+				&lt;ul class="p-m-0 p-p-0"&gt;
+					&lt;li class="p-mb-3"&gt;
+						&lt;div class="p-d-flex"&gt;
+							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+							&lt;div style="flex: 1"&gt;
+								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
+							&lt;/div&gt;
+						&lt;/div&gt;
+					&lt;/li&gt;
+					&lt;li class="p-mb-3"&gt;
+						&lt;div class="p-d-flex"&gt;
+							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+							&lt;div style="flex: 1"&gt;
+								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
+							&lt;/div&gt;
+						&lt;/div&gt;
+					&lt;/li&gt;
+					&lt;li class="p-mb-3"&gt;
+						&lt;div class="p-d-flex"&gt;
+							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+							&lt;div style="flex: 1"&gt;
+								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
+							&lt;/div&gt;
+						&lt;/div&gt;
+					&lt;/li&gt;
+					&lt;li&gt;
+						&lt;div class="p-d-flex"&gt;
+							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
+							&lt;div style="flex: 1"&gt;
+								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
+								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
+							&lt;/div&gt;
+						&lt;/div&gt;
+					&lt;/li&gt;
+				&lt;/ul&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+	&lt;h5&gt;DataTable&lt;/h5&gt;
+	&lt;DataTable :value="products"&gt;
+		&lt;Column field="code" header="Code"&gt;
+			&lt;template #body&gt;
+				&lt;Skeleton&gt;&lt;/Skeleton&gt;
+			&lt;/template&gt;
+		&lt;/Column&gt;
+		&lt;Column field="name" header="Name"&gt;
+			&lt;template #body&gt;
+				&lt;Skeleton&gt;&lt;/Skeleton&gt;
+			&lt;/template&gt;
+		&lt;/Column&gt;
+		&lt;Column field="category" header="Category"&gt;
+			&lt;template #body&gt;
+				&lt;Skeleton&gt;&lt;/Skeleton&gt;
+			&lt;/template&gt;
+		&lt;/Column&gt;
+		&lt;Column field="quantity" header="Quantity"&gt;
+			&lt;template #body&gt;
+				&lt;Skeleton&gt;&lt;/Skeleton&gt;
+			&lt;/template&gt;
+		&lt;/Column&gt;
+	&lt;/DataTable&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+			</TabPanel>
+		</TabView>
+	</div>
+</template>