diff --git a/README.md b/README.md
index d75f054..49cb061 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,7 @@ Or with regular HTML:
 
 ```js
 new LoadingScreenPlugin({
-  logo: '<svg xmlns>...</svg>'
+  logo: '<div>my logo</div>'
 })
 ```
 
@@ -122,6 +122,11 @@ Progress hooks report details.
 
 Reference: https://webpack.js.org/plugins/progress-plugin/
 
+### showPercent
+
+- Type: `boolean`
+- Default: `true`
+
 ## Credits
 
 - [**nuxt/loading-screen**](https://github.com/nuxt/loading-screen)
diff --git a/app/app.vue b/app/app.vue
index f05d42b..de13e02 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -23,7 +23,10 @@
         <div class="progress_bar_container">
           <div class="progress_bar" :style="{ width: `${states[bundle].progress}%`, backgroundColor: theme[bundle] }" />
         </div>
-        <h4>{{ states[bundle].status }}</h4>
+        <div class="progress_status_container">
+          <h4>{{ states[bundle].status }}</h4>
+          <h4 v-if="theme.showPercent">{{ states[bundle].progress  }}%</h4>
+        </div>
       </div>
     </transition-group>
   </div>
diff --git a/app/css/loading.css b/app/css/loading.css
index cab8cc8..3e9b988 100644
--- a/app/css/loading.css
+++ b/app/css/loading.css
@@ -76,3 +76,8 @@ h4 {
   width: 10px;
   transition: width 0.4s;
 }
+
+.progress_status_container {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/lib/loading.js b/lib/loading.js
index c124504..2fa8748 100644
--- a/lib/loading.js
+++ b/lib/loading.js
@@ -12,7 +12,9 @@ class LoadingUI {
     this.baseURL = opts.baseURL
 
     this.logo = opts.logo
-    this.theme = opts.theme
+    this.theme = Object.assign(opts.theme, {
+      showPercent: opts.showPercent
+    })
 
     this.serveIndex = this.serveIndex.bind(this)
     this.serveWS = this.serveWS.bind(this)
diff --git a/lib/plugin.js b/lib/plugin.js
index 0bbcc20..0da8411 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -5,6 +5,10 @@ const { ProgressPlugin: Plugin } = require('webpack')
 module.exports = class ProgressPlugin extends Plugin {
   constructor(opts = {}) {
     super()
+    this.env = opts.env || process.env.NODE_ENV || 'development'
+
+    this.isProd = this.env === 'production'
+
     this.opts = Object.assign(
       {
         baseURL: '/',
@@ -12,19 +16,19 @@ module.exports = class ProgressPlugin extends Plugin {
         host: 'localhost',
         port: process.env.port || 4000,
         callback: () => {
+          if (this.isProd) return
           console.log(`[loading screen]:  http://localhost:${this.opts.port}`)
         },
         theme: {
           client: '#8ed5fb',
           server: '#1b78bf',
           modern: '#2f495e'
-        }
+        },
+        showPercent: true
       },
       opts
     )
 
-    this.env = opts.env || process.env.NODE_ENV
-
     this.connections = new Set()
 
     this.handler = (per, message, ...details) => {
@@ -47,10 +51,6 @@ module.exports = class ProgressPlugin extends Plugin {
   }
 
   async init() {
-    if (this.env !== 'development') {
-      return
-    }
-
     const LoadingUI = require('./loading')
     this.loading = new LoadingUI(this.opts)