fix: save

src/components/Viewer.jsx

@@ -64,6 +64,7 @@ class ViewerInner extends Component {
     this.processBarRef = createRef(null);
     this.processingRef = createRef(null);
     this.preProcessingRef = createRef(null);
+    this.processBgRef = createRef(null);
 
     this.sequence = [];
     this.loadedRenderPool = [];
@@ -177,8 +178,8 @@ class ViewerInner extends Component {
         this.poolNewFrames(index - 1);
       }
       var t = 100 - (this.frame / this.fullFrameCount) * 100 + "%";
-      if (this.preProcessingRef.current) {
-        this.preProcessingRef.current.style.width = t;
+      if (this.processBgRef.current) {
+        this.processBgRef.current.style.width = t;
       }
       this.loadedCount += 1;
       if (this.loadedCount === parseFloat(this.props.frameCount) - 1) {
@@ -505,27 +506,48 @@ class ViewerInner extends Component {
         >
           <div
             css={css`
-              position: absolute;
-              width: auto;
+              position: relative;
+              width: 100%;
               height: 4px;
-              left: 0;
-              bottom: 0;
-              z-index: 10;
-              background-color: rgba(120, 120, 163, 0.33);
             `}
-            ref={this.preProcessingRef}
-          ></div>
+          >
+            <div
+              css={css`
+                position: absolute;
+                width: auto;
+                height: 4px;
+                left: 0;
+                bottom: 0;
+                z-index: 10;
+                background-color: rgba(120, 120, 163, 0.33);
+              `}
+              ref={this.preProcessingRef}
+            ></div>
+            <div
+              css={css`
+                position: absolute;
+                width: auto;
+                height: 4px;
+                left: 0;
+                bottom: 0;
+                z-index: 10;
+                background-color: hsla(0, 0%, 79.2%, 0.5);
+              `}
+              ref={this.processingRef}
+            ></div>
+          </div>
+
           <div
+            ref={this.processBgRef}
             css={css`
               position: absolute;
-              width: auto;
-              height: 4px;
               left: 0;
-              bottom: 0;
-              z-index: 10;
-              background-color: hsla(0, 0%, 79.2%, 0.5);
+              top: 0;
+              width: 0;
+              height: 6px;
+              border-top: 1px solid rgba(33, 33, 44, 0.6);
+              background-color: rgba(17, 17, 34, 0.6);
             `}
-            ref={this.processingRef}
           ></div>
         </div>