diff --git a/docs/src/components/layout/SideMenu.vue b/docs/src/components/layout/SideMenu.vue
index 4ed1e65..82bdab4 100644
--- a/docs/src/components/layout/SideMenu.vue
+++ b/docs/src/components/layout/SideMenu.vue
@@ -33,6 +33,9 @@
       <nuxt-link to="/alerts" class="nav-item">
         <div class="nav-label">Inline Alerts</div>
       </nuxt-link>
+      <nuxt-link to="/loaders" class="nav-item">
+        <div class="nav-label">Loaders</div>
+      </nuxt-link>
       <nuxt-link to="/responsive-area" class="nav-item">
         <div class="nav-label">Responsive Area</div>
       </nuxt-link>
diff --git a/docs/src/examples/buttons/Buttons.vue b/docs/src/examples/buttons/Buttons.vue
index 87949a6..eb7b869 100644
--- a/docs/src/examples/buttons/Buttons.vue
+++ b/docs/src/examples/buttons/Buttons.vue
@@ -11,9 +11,17 @@
     <button class="pl-btn pl-btn--9">Button</button>
     <button class="pl-btn pl-btn--10">Button</button>
     <button class="pl-btn pl-btn--11">Button</button>
+    <button class="pl-btn pl-btn--12">Button</button>
+    <button class="pl-btn pl-btn--13">
+      <span class="pl-btn--13-bg"></span>
+      <span>Button</span>
+    </button>
     <button class="pl-btn--rounded-1">
       <i class="light-icon-info-circle"></i>
     </button>
+    <button class="pl-btn--rounded-2">
+      <i class="light-icon-info-circle"></i>
+    </button>
   </div>
 </template>
 
@@ -132,6 +140,42 @@ export default {};
   }
 }
 
+.pl-btn--12 {
+  border: 2px solid #607c8a00;
+  transition: 0.3s border;
+  &:hover {
+    border: 2px solid #607c8a;
+  }
+}
+
+.pl-btn--13 {
+  border: 2px solid #607c8a00;
+  padding: 0;
+  display: grid;
+  grid-template-columns: max-content;
+  grid-template-rows: 100%;
+  transition: all 0.3s;
+  span {
+    width: 100%;
+    transition: all 0.3s;
+    padding: 0.8rem 1.6rem;
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
+  }
+  .pl-btn--13-bg {
+    max-width: 4px;
+    padding: 0 !important;
+    height: 100%;
+    background-color: #607c8a;
+  }
+  &:hover {
+    color: #fff;
+    .pl-btn--13-bg {
+      max-width: 100%;
+    }
+  }
+}
+
 // Rounded Btn
 .pl-btn--rounded-1 {
   display: flex;
@@ -152,4 +196,23 @@ export default {};
     margin: 7px;
   }
 }
+
+.pl-btn--rounded-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: 50%;
+  color: #607c8a;
+  appearance: none;
+  border: 2px solid #607c8a;
+  cursor: pointer;
+  margin: 20px;
+  text-decoration: none;
+  text-align: center;
+  outline: none;
+  i {
+    font-size: 26px;
+    margin: 7px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/docs/src/examples/loaders/Loaders.vue b/docs/src/examples/loaders/Loaders.vue
new file mode 100644
index 0000000..77e17ff
--- /dev/null
+++ b/docs/src/examples/loaders/Loaders.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="loaderContainer">
+    <div class="pl-loader pl-loader--1">
+      <div class="loaderLine"></div>
+    </div>
+
+    <div class="pl-loader pl-loader--2">
+      <div class="loaderLine"></div>
+    </div>
+
+    <div class="pl-loader pl-loader--3">
+      <div class="loaderLine"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.loaderContainer {
+  padding: 0px 40px;
+  padding-bottom: 60px;
+}
+
+.loaderContainer .pl-loader {
+  margin-top: 60px;
+}
+
+.pl-loader {
+  height: max-content;
+  padding: 0px 0px;
+  background-color: #607c8a40;
+}
+
+//Animation 1
+
+@keyframes loaderAnim1 {
+  0% {
+    width: 0%;
+    margin-left: 0%;
+  }
+  50% {
+    width: 100%;
+    margin-left: 0%;
+  }
+  100% {
+    width: 0%;
+    margin-left: 100%;
+  }
+}
+
+.pl-loader--1 .loaderLine {
+  background-color: #607c8a;
+  height: 4px;
+  width: 100%;
+  animation: loaderAnim1 2s ease-in-out infinite;
+}
+
+//Animation 2
+
+@keyframes loaderAnim2 {
+  0% {
+    width: 0%;
+    margin-left: 0%;
+  }
+  50% {
+    width: 100%;
+    margin-left: 0%;
+  }
+  100% {
+    width: 0%;
+    margin-left: 100%;
+  }
+}
+
+.pl-loader--2 .loaderLine {
+  background-color: #607c8a;
+  height: 4px;
+  width: 100%;
+  animation: loaderAnim1 2s alternate infinite;
+}
+
+//Animation 3
+
+@keyframes loaderAnim3 {
+  0% {
+    width: 0%;
+    margin-left: 0%;
+  }
+  50% {
+    width: 70%;
+    margin-left: 15%;
+  }
+  100% {
+    width: 0%;
+    margin-left: 100%;
+  }
+}
+
+.pl-loader--3 .loaderLine {
+  background-color: #607c8a;
+  height: 4px;
+  width: 100%;
+  animation: loaderAnim3 2s ease-in-out infinite;
+}
+</style>
\ No newline at end of file
diff --git a/docs/src/examples/shadow/BoxShadowHover.vue b/docs/src/examples/shadow/BoxShadowHover.vue
index 10cccfc..7202a91 100644
--- a/docs/src/examples/shadow/BoxShadowHover.vue
+++ b/docs/src/examples/shadow/BoxShadowHover.vue
@@ -15,4 +15,8 @@
 <script>
 export default {};
 </script>
-<style scoped></style>
+<style scoped>
+.box-sq {
+  transition: box-shadow 0.3s;
+}
+</style>
diff --git a/docs/src/pages/loaders.vue b/docs/src/pages/loaders.vue
new file mode 100644
index 0000000..df99395
--- /dev/null
+++ b/docs/src/pages/loaders.vue
@@ -0,0 +1,24 @@
+<template>
+  <docs-page :title="$options.title" :description="$options.description">
+    <template #api>
+      <docs-properties api-path="/api/loaders.json" />
+    </template>
+    <docs-card-vue title="CSS Only Loaders" file="examples/loaders/Loaders" />
+  </docs-page>
+</template>
+
+<script>
+import DocsPage from "@/layouts/docs-page.vue";
+import DocsProperties from "@/collections/DocsProperties.vue";
+import DocsCardVue from "@/collections/docs-card/DocsCardVue.vue";
+
+export default {
+  components: {
+    DocsCardVue,
+    DocsProperties,
+    DocsPage,
+  },
+  title: "CSS Loaders",
+  description: `These loaders collection of Plug UI allows the developer to display a lightweight loading animation while doing some time-consuming operation like fetching data etc.`,
+};
+</script>
diff --git a/docs/src/static/api/buttons.json b/docs/src/static/api/buttons.json
index 6c11631..cce90d9 100644
--- a/docs/src/static/api/buttons.json
+++ b/docs/src/static/api/buttons.json
@@ -44,9 +44,39 @@
     "description": "",
     "properties": ""
   },
+  {
+    "class": ".pl-btn--9",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-btn--10",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-btn--11",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-btn--12",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-btn--13",
+    "description": "",
+    "properties": ""
+  },
   {
     "class": ".pl-btn--rounded-1",
     "description": "",
     "properties": ""
+  },
+  {
+    "class": ".pl-btn--rounded-2",
+    "description": "",
+    "properties": ""
   }
-]
+]
\ No newline at end of file
diff --git a/docs/src/static/api/loaders.json b/docs/src/static/api/loaders.json
new file mode 100644
index 0000000..a5ec2d8
--- /dev/null
+++ b/docs/src/static/api/loaders.json
@@ -0,0 +1,17 @@
+[
+  {
+    "class": ".pl-loader .pl-loader--1",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-loader .pl-loader--2",
+    "description": "",
+    "properties": ""
+  },
+  {
+    "class": ".pl-loader .pl-loader--3",
+    "description": "",
+    "properties": ""
+  }
+]
\ No newline at end of file