diff --git a/README.md b/README.md
index 0e1d31b..c00f2b4 100755
--- a/README.md
+++ b/README.md
@@ -146,6 +146,7 @@ Use the `duration` parameter to set the animation loop duration in seconds (does
 | is-full-screen    | Boolean        | false        | Loader will overlay the full page |
 | text   | String    | -  | Text will appear below loader |
 | text-style | Object | {} | Change style of the text below loader |
+| transition-duration    | Number \| String        | 300        | The minimum appearing duration of transition in milliseconds |
 
 
 # 🤝 Contributing
diff --git a/src/index.vue b/src/index.vue
index ee23a4f..9991de3 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -3,7 +3,7 @@
     <div
       v-show="isActive || isActiveDelay"
       :class="{ 'velmld-full-screen': isFullScreen }"
-      :style="{ backgroundColor }"
+      :style="{ backgroundColor, transition }"
       ref="velmld"
       class="velmld-overlay"
     >
@@ -71,6 +71,10 @@ export default {
     delay: {
       type: [String, Number],
       default: 0
+    },
+    transitionDuration: {
+      type: [String, Number],
+      default: 300
     }
   },
   data () {
@@ -99,6 +103,11 @@ export default {
       }, ms)
     }
   },
+  computed: {
+    transition() {
+      return `opacity ${+this.transitionDuration}ms`
+    },
+  },
   watch: {
     /**
      * Binding outside component value and inside component value.
@@ -130,7 +139,6 @@ export default {
   right: 0;
   bottom: 0;
   left: 0;
-  transition: opacity .3s;
 }
 .velmld-spinner {
   top: 50%;