diff --git a/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap b/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap
index d711d24359..e67926bd43 100644
--- a/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap
+++ b/packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap
@@ -4,13 +4,13 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
 <scale-progress-bar text-inside="true">
   <mock:shadow-root>
     <style>
-      .progress-bar-0-0-55 {
+      .progress-bar-0-0-64 {
   width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
 }
-.progress-bar__outer-0-0-56 {
+.progress-bar__outer-0-0-65 {
   width: 400px;
   height: 6px;
   margin: 12px 12px 12px 0;
@@ -19,7 +19,7 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
   background: #ebeef5;
   border-radius: 100px;
 }
-.progress-bar__inner-0-0-57 {
+.progress-bar__inner-0-0-66 {
   top: 0;
   left: 0;
   height: 100%;
@@ -31,34 +31,34 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
   border-radius: 100px;
   justify-content: flex-end;
 }
-.progress-bar__inner-text-0-0-58 {
+.progress-bar__inner-text-0-0-67 {
   color: #fff;
   padding: 0 12px;
   font-size: 12px;
 }
-.progress-bar__text-0-0-59 {
+.progress-bar__text-0-0-68 {
   color: #606266;
   display: inline-block;
   font-size: 14px;
 }
-.progress-bar--variant-success-0-0-60 {
+.progress-bar--variant-success-0-0-69 {
   background: #28a745;
 }
-.progress-bar--variant-info-0-0-61 {
+.progress-bar--variant-info-0-0-70 {
   background: #409eff;
 }
-.progress-bar--variant-warning-0-0-62 {
+.progress-bar--variant-warning-0-0-71 {
   background: #ffc107;
 }
-.progress-bar--variant-danger-0-0-63 {
+.progress-bar--variant-danger-0-0-72 {
   background: #dc3545;
 }
     </style>
-    <div class="progress-bar-0-0-55">
-      <div class="progress-bar__outer-0-0-56" style="height: 6px;">
-        <div class="progress-bar-0-0-55 progress-bar__inner-0-0-57" style="width: undefined%;">
-          <div class="progress-bar__inner-text-0-0-58">
-            undefined%
+    <div class="progress-bar-0-0-64">
+      <div class="progress-bar__outer-0-0-65" style="height: 6px;">
+        <div class="progress-bar-0-0-64 progress-bar__inner-0-0-66" style="width: 0%;">
+          <div class="progress-bar__inner-text-0-0-67">
+            0%
           </div>
         </div>
       </div>
@@ -72,13 +72,13 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
 <scale-progress-bar show-text="true">
   <mock:shadow-root>
     <style>
-      .progress-bar-0-0-37 {
+      .progress-bar-0-0-46 {
   width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
 }
-.progress-bar__outer-0-0-38 {
+.progress-bar__outer-0-0-47 {
   width: 400px;
   height: 6px;
   margin: 12px 12px 12px 0;
@@ -87,7 +87,7 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
   background: #ebeef5;
   border-radius: 100px;
 }
-.progress-bar__inner-0-0-39 {
+.progress-bar__inner-0-0-48 {
   top: 0;
   left: 0;
   height: 100%;
@@ -99,35 +99,35 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
   border-radius: 100px;
   justify-content: flex-end;
 }
-.progress-bar__inner-text-0-0-40 {
+.progress-bar__inner-text-0-0-49 {
   color: #fff;
   padding: 0 12px;
   font-size: 12px;
 }
-.progress-bar__text-0-0-41 {
+.progress-bar__text-0-0-50 {
   color: #606266;
   display: inline-block;
   font-size: 14px;
 }
-.progress-bar--variant-success-0-0-42 {
+.progress-bar--variant-success-0-0-51 {
   background: #28a745;
 }
-.progress-bar--variant-info-0-0-43 {
+.progress-bar--variant-info-0-0-52 {
   background: #409eff;
 }
-.progress-bar--variant-warning-0-0-44 {
+.progress-bar--variant-warning-0-0-53 {
   background: #ffc107;
 }
-.progress-bar--variant-danger-0-0-45 {
+.progress-bar--variant-danger-0-0-54 {
   background: #dc3545;
 }
     </style>
-    <div class="progress-bar-0-0-37">
-      <div class="progress-bar__outer-0-0-38" style="height: 6px;">
-        <div class="progress-bar-0-0-37 progress-bar__inner-0-0-39" style="width: undefined%;"></div>
+    <div class="progress-bar-0-0-46">
+      <div class="progress-bar__outer-0-0-47" style="height: 6px;">
+        <div class="progress-bar-0-0-46 progress-bar__inner-0-0-48" style="width: 0%;"></div>
       </div>
-      <div class="progress-bar__text-0-0-41">
-        undefined%
+      <div class="progress-bar__text-0-0-50">
+        0%
       </div>
     </div>
   </mock:shadow-root>
@@ -139,13 +139,13 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
 <scale-progress-bar stroke-width="24">
   <mock:shadow-root>
     <style>
-      .progress-bar-0-0-10 {
+      .progress-bar-0-0-28 {
   width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
 }
-.progress-bar__outer-0-0-11 {
+.progress-bar__outer-0-0-29 {
   width: 400px;
   height: 6px;
   margin: 12px 12px 12px 0;
@@ -154,7 +154,7 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
   background: #ebeef5;
   border-radius: 100px;
 }
-.progress-bar__inner-0-0-12 {
+.progress-bar__inner-0-0-30 {
   top: 0;
   left: 0;
   height: 100%;
@@ -166,32 +166,32 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
   border-radius: 100px;
   justify-content: flex-end;
 }
-.progress-bar__inner-text-0-0-13 {
+.progress-bar__inner-text-0-0-31 {
   color: #fff;
   padding: 0 12px;
   font-size: 12px;
 }
-.progress-bar__text-0-0-14 {
+.progress-bar__text-0-0-32 {
   color: #606266;
   display: inline-block;
   font-size: 14px;
 }
-.progress-bar--variant-success-0-0-15 {
+.progress-bar--variant-success-0-0-33 {
   background: #28a745;
 }
-.progress-bar--variant-info-0-0-16 {
+.progress-bar--variant-info-0-0-34 {
   background: #409eff;
 }
-.progress-bar--variant-warning-0-0-17 {
+.progress-bar--variant-warning-0-0-35 {
   background: #ffc107;
 }
-.progress-bar--variant-danger-0-0-18 {
+.progress-bar--variant-danger-0-0-36 {
   background: #dc3545;
 }
     </style>
-    <div class="progress-bar-0-0-10">
-      <div class="progress-bar__outer-0-0-11" style="height: 24px;">
-        <div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: undefined%;"></div>
+    <div class="progress-bar-0-0-28">
+      <div class="progress-bar__outer-0-0-29" style="height: 24px;">
+        <div class="progress-bar-0-0-28 progress-bar__inner-0-0-30" style="width: 0%;"></div>
       </div>
     </div>
   </mock:shadow-root>
@@ -255,7 +255,7 @@ exports[`ProgressBar should match snapshot 1`] = `
     </style>
     <div class="progress-bar-0-0-10">
       <div class="progress-bar__outer-0-0-11" style="height: 6px;">
-        <div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: undefined%;"></div>
+        <div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: 0%;"></div>
       </div>
     </div>
   </mock:shadow-root>
diff --git a/packages/components/src/components/progress-bar/progress-bar.tsx b/packages/components/src/components/progress-bar/progress-bar.tsx
index f0c837bca0..e8b071baf1 100644
--- a/packages/components/src/components/progress-bar/progress-bar.tsx
+++ b/packages/components/src/components/progress-bar/progress-bar.tsx
@@ -14,7 +14,7 @@ export class ProgressBar implements Base {
   /** (optional) Progress bar class */
   @Prop() customClass?: string = '';
   /** (required) Progress bar percentage */
-  @Prop() percentage: number;
+  @Prop() percentage: number = 0;
   /** (optional) Progress bar variant */
   @Prop() variant?: string;
   /** (optional) Progress bar stroke width */
diff --git a/packages/components/src/components/progress-bar/readme.md b/packages/components/src/components/progress-bar/readme.md
index ea80598fdd..afb1482684 100644
--- a/packages/components/src/components/progress-bar/readme.md
+++ b/packages/components/src/components/progress-bar/readme.md
@@ -10,7 +10,7 @@
 | Property      | Attribute      | Description                                 | Type                                     | Default     |
 | ------------- | -------------- | ------------------------------------------- | ---------------------------------------- | ----------- |
 | `customClass` | `custom-class` | (optional) Progress bar class               | `string`                                 | `''`        |
-| `percentage`  | `percentage`   | (required) Progress bar percentage          | `number`                                 | `undefined` |
+| `percentage`  | `percentage`   | (required) Progress bar percentage          | `number`                                 | `0`         |
 | `showText`    | `show-text`    | (optional) Progress bar percentage text     | `boolean`                                | `undefined` |
 | `strokeWidth` | `stroke-width` | (optional) Progress bar stroke width        | `number`                                 | `6`         |
 | `styles`      | --             | (optional) Injected jss styles              | `StyleSheet<string \| number \| symbol>` | `undefined` |
diff --git a/packages/components/src/utils/css-in-js.tsx b/packages/components/src/utils/css-in-js.tsx
index fb009461b3..9c35736a14 100644
--- a/packages/components/src/utils/css-in-js.tsx
+++ b/packages/components/src/utils/css-in-js.tsx
@@ -13,16 +13,11 @@ declare type CssInJsDecorator = (
 ) => void;
 
 const getKeys = obj => {
-  const blackListedProps = ['stylesheet', 'value', 'key'];
-  const whiteListedTypes = ['boolean', 'string', 'object'];
+  const whitelistedProps = ['styles'];
   const keys = [];
 
   for (const key in obj) {
-    if (
-      obj[key] &&
-      whiteListedTypes.includes(typeof obj[key]) &&
-      !blackListedProps.includes(key)
-    ) {
+    if (obj[key] && !whitelistedProps.includes(key)) {
       keys.push(key);
     }
   }