fix(progressbar): improve progressbar animation (#306)

* fix(progressbar): improve progressbar animation * fix(progressbar): minor fixes on progress bar
Codebrahma · Jan 2, 2019 · c4d9397 · c4d9397
1 parent 68ee49a
commit c4d9397
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/lib/progressbar/index.js b/lib/progressbar/index.js
@@ -18,7 +18,7 @@ class ProgressBar extends React.Component {
   }
 
   componentDidUpdate(props) {
-    this.progress.style.width = `${props.progress}%`;
+    this.progress.style.transform = `scaleX(${((props.progress || 0.01) / 100)})`;
   }
 
   render() {
@@ -52,7 +52,7 @@ ProgressBar.propTypes = {
 ProgressBar.defaultProps = {
   theme: defaultTheme,
   type: 'primary',
-  progress: 0,
+  progress: 0.01,
   showProgressText: false,
 };
 

diff --git a/lib/progressbar/tests/accessibility.test.js b/lib/progressbar/tests/accessibility.test.js
@@ -45,7 +45,7 @@ describe('ProgressBar accessibility tests', () => {
   });
 
   it('Should accept a progress prop to update progress effectively.', () => {
-    expectedValueBefore = 0;
+    expectedValueBefore = 0.01;
     let progress = 0;
     actualValue = () => wrappedComponent
       .find(ProgressBar)

diff --git a/lib/progressbar/theme.module.scss b/lib/progressbar/theme.module.scss
@@ -20,7 +20,13 @@
 
 :local(.progress) {
     height: 100%;
-    width: 0%;
+    width: 100%;
+    will-change: transform;
+    transform: scaleX(0);
+    position: absolute;
+    left: 0;
+    transform-origin: left;
+    transition: transform 0.07s linear;
 }
 
 :local(.primary) {