progress bar background

fkhadra · Dec 4, 2023 · 297a835 · 297a835
1 parent 14ff114
commit 297a835
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
  );
 }