diff --git a/scss/_progressBar.scss b/scss/_progressBar.scss
index 74fe02bb..14978634 100644
--- a/scss/_progressBar.scss
+++ b/scss/_progressBar.scss
@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 5px;
+  height: 100%;
   z-index: var(--toastify-z-index);
   opacity: 0.7;
   transform-origin: left;
@@ -33,4 +33,19 @@
     border-bottom-left-radius: initial;
     border-bottom-right-radius: var(--toastify-toast-bd-radius);
   }
+
+  &--wrp {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    border-bottom-left-radius: var(--toastify-toast-bd-radius);
+  }
+
+  &--background {
+    opacity: 0.1;
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/scss/_toast.scss b/scss/_toast.scss
index bca899da..378e55c2 100644
--- a/scss/_toast.scss
+++ b/scss/_toast.scss
@@ -70,7 +70,7 @@
       height: 100%;
       transform: scaleY(3);
       z-index: -1;
-     }
+    }
   }
   
   &--rtl {
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index b404eca0..40052219 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -125,13 +125,18 @@ export function ProgressBar({
   // TODO: add aria-valuenow, aria-valuemax, aria-valuemin
 
   return (
-    <div
-      role="progressbar"
-      aria-hidden={isHidden ? 'true' : 'false'}
-      aria-label="notification timer"
-      className={classNames}
-      style={style}
-      {...animationEvent}
-    />
+    <div className={`${Default.CSS_NAMESPACE}__progress-bar--wrp`}>
+      <div
+        className={`${Default.CSS_NAMESPACE}__progress-bar--background ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}
+      />
+      <div
+        role="progressbar"
+        aria-hidden={isHidden ? 'true' : 'false'}
+        aria-label="notification timer"
+        className={classNames}
+        style={style}
+        {...animationEvent}
+      />
+    </div>
   );
 }