@douyinfe/semi-foundation 2.101.1 → 2.103.0

package/lib/es/dragMove/foundation.d.ts

@@ -20,10 +20,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
     get constrainer(): HTMLElement;
     get handler(): HTMLElement;
     constructor(adapter: DragMoveAdapter<P, S>);
     init(): void;
+    updatePositionStrategy: () => void;
     _registerStartEvent: () => void;
     _unRegisterStartEvent: () => void;
     destroy(): void;

package/lib/es/dragMove/foundation.js

@@ -11,6 +11,9 @@ export default class DragMoveFoundation extends BaseFoundation {
   }
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.updatePositionStrategy = () => {
+      this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    };
     this._registerStartEvent = () => {
       this.handler.addEventListener('mousedown', this.onMouseDown);
       this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -38,6 +41,14 @@ export default class DragMoveFoundation extends BaseFoundation {
       document.removeEventListener('touchcancel', this._onTouchCancel);
     };
     this._calcOffset = e => {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const style = window.getComputedStyle(this.element);
+        this.startClientX = e.clientX;
+        this.startClientY = e.clientY;
+        this.startLeft = parseFloat(style.left) || 0;
+        this.startTop = parseFloat(style.top) || 0;
+        return;
+      }
       this.startOffsetX = e.clientX - this.element.offsetLeft;
       this.startOffsetY = e.clientY - this.element.offsetTop;
     };
@@ -71,8 +82,9 @@ export default class DragMoveFoundation extends BaseFoundation {
       const {
         customMove
       } = this.getProps();
-      let newLeft = e.clientX - this.startOffsetX;
-      let newTop = e.clientY - this.startOffsetY;
+      const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+      let newLeft = useRelativePosition ? this.startLeft + e.clientX - this.startClientX : e.clientX - this.startOffsetX;
+      let newTop = useRelativePosition ? this.startTop + e.clientY - this.startClientY : e.clientY - this.startOffsetY;
       if (this.constrainer) {
         newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
         newTop = clampValueInRange(newTop, this.yMin, this.yMax);
@@ -114,7 +126,7 @@ export default class DragMoveFoundation extends BaseFoundation {
       throw new Error('drag element must be a valid element');
     }
     this.element = element;
-    this.element.style.position = 'absolute';
+    this.updatePositionStrategy();
     this.handler.style.cursor = 'move';
     this._registerStartEvent();
   }
@@ -129,6 +141,18 @@ export default class DragMoveFoundation extends BaseFoundation {
   _calcMoveRange() {
     // Calculate the range within which an element can move
     if (this.constrainer) {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const elementRect = this.element.getBoundingClientRect();
+        const constrainerRect = this.constrainer.getBoundingClientRect();
+        const style = window.getComputedStyle(this.element);
+        const currentLeft = parseFloat(style.left) || 0;
+        const currentTop = parseFloat(style.top) || 0;
+        this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+        this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+        this.yMin = currentTop + constrainerRect.top - elementRect.top;
+        this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+        return;
+      }
       let node = this.element.offsetParent;
       let startX = 0;
       let startY = 0;

package/lib/es/progress/progress.css

@@ -20,6 +20,7 @@
 .semi-progress-horizontal .semi-progress-track {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 .semi-progress-horizontal .semi-progress-track-inner {
   height: 100%;
@@ -28,6 +29,11 @@
   transition: width 0.3s;
   transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
+.semi-progress-horizontal .semi-progress-track-inner-indeterminate {
+  width: 35%;
+  transition: none;
+  animation: semi-progress-indeterminate-slide 1.6s ease-in-out infinite;
+}
 .semi-progress-horizontal .semi-progress-line-text {
   min-width: 45px;
   font-weight: 600;
@@ -48,6 +54,7 @@
 .semi-progress-vertical .semi-progress-track {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 .semi-progress-vertical .semi-progress-track-inner {
   background-color: var(--semi-color-success);
@@ -56,6 +63,12 @@
   transition: height 0.3s;
   transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
+.semi-progress-vertical .semi-progress-track-inner-indeterminate {
+  height: 35%;
+  width: 100%;
+  transition: none;
+  animation: semi-progress-indeterminate-slide-vertical 1.6s ease-in-out infinite;
+}
 .semi-progress-vertical .semi-progress-line-text {
   font-weight: 600;
   margin-top: 8px;
@@ -77,6 +90,11 @@
   transform-origin: 50% 50%;
   stroke: var(--semi-color-success);
 }
+.semi-progress-circle-ring-inner-indeterminate {
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  animation: semi-progress-indeterminate-rotate 1.2s linear infinite;
+}
 .semi-progress-circle-text {
   position: absolute;
   top: 50%;
@@ -88,6 +106,36 @@
   color: var(--semi-color-mode-minor-text);
 }
 
+@keyframes semi-progress-indeterminate-slide {
+  0% {
+    transform: translateX(-120%);
+  }
+  55% {
+    transform: translateX(300%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+@keyframes semi-progress-indeterminate-slide-vertical {
+  0% {
+    transform: translateY(-120%);
+  }
+  55% {
+    transform: translateY(300%);
+  }
+  100% {
+    transform: translateY(300%);
+  }
+}
+@keyframes semi-progress-indeterminate-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .semi-rtl .semi-progress,
 .semi-portal-rtl .semi-progress {
   direction: rtl;

package/lib/es/progress/progress.scss

@@ -23,6 +23,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -33,6 +34,12 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            width: 35%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             min-width: $width-progress_line_text;
             font-weight: $font-progress_line_text-fontWeight;
@@ -57,6 +64,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -67,6 +75,13 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            height: 35%;
+            width: 100%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide-vertical 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             font-weight: $font-progress_line_text-fontWeight;
             margin-top: $spacing-progress_vertical_line_text-marginTop;
@@ -95,6 +110,12 @@ $module: #{$prefix}-progress;
             stroke: $color-progress_track_inner-bg;
         }
 
+        &-ring-inner-indeterminate {
+            transform: rotate(0deg);
+            transform-origin: 50% 50%;
+            animation: semi-progress-indeterminate-rotate 1.2s linear infinite;
+        }
+
         &-text {
             position: absolute;
             top: 50%;
@@ -108,4 +129,42 @@ $module: #{$prefix}-progress;
     }
 }
 
-@import './rtl.scss';
+@keyframes semi-progress-indeterminate-slide {
+    0% {
+        transform: translateX(-120%);
+    }
+
+    55% {
+        transform: translateX(300%);
+    }
+
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-slide-vertical {
+    0% {
+        transform: translateY(-120%);
+    }
+
+    55% {
+        transform: translateY(300%);
+    }
+
+    100% {
+        transform: translateY(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@import './rtl.scss';

package/lib/es/tree/foundation.js

@@ -432,7 +432,10 @@ export default class TreeFoundation extends BaseFoundation {
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
     if (!this._isExpandControlled()) {
       const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
-      const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+      let motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+      if (isSearching && showFilteredOnly) {
+        motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+      }
       const newState = {
         [expandedStateKey]: expandedKeys,
         flattenNodes,

package/lib/es/upload/foundation.d.ts

@@ -94,6 +94,33 @@ declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>>
      * When paste event is successfully handled, we ignore the subsequent keydown event.
      */
     _pasteHandled: boolean;
+    /**
+     * Working copy of fileList used during a synchronous startUpload batch.
+     * Do NOT rely on React state fileList here: setState is async (batched in React 18),
+     * so reading getState('fileList') between iterations of a sync loop returns a stale
+     * snapshot and earlier removals get overwritten by later ones (see #3335).
+     * Seeded at the start of startUpload and cleared when the sync loop finishes (see
+     * try/finally in startUpload); async (promise) results fall back to _latestFileList
+     * then React state.
+     */
+    _batchFileList: Array<BaseFileItem> | null;
+    /**
+     * The most recent fileList produced by handleBeforeUploadResultInObject.
+     * Unlike React state (which is flushed asynchronously under React 18 automatic
+     * batching), this is updated synchronously, so a later async beforeUpload result
+     * composes with earlier sync removals of the same batch instead of reading a stale
+     * snapshot (mixed sync + async beforeUpload results, see #3335).
+     */
+    _latestFileList: Array<BaseFileItem> | null;
+    /**
+     * Unify all fileList commits: keep _latestFileList in sync synchronously so async
+     * beforeUpload results compose with recent mutations even before React flushes
+     * setState (React 18 automatic batching). (#3335)
+     */
+    updateFileListInternal(newFileList: Array<BaseFileItem>, callback?: () => void): void;
+    /** Keep the synchronous snapshot aligned with an externally controlled fileList. */
+    syncLatestFileList(fileList: Array<BaseFileItem>): void;
+    getLatestFileList(): Array<BaseFileItem>;
     constructor(adapter: UploadAdapter<P, S>);
     init(): void;
     /**

package/lib/es/upload/foundation.js

@@ -41,6 +41,25 @@ const {
   TRIGGER_AUTO
 } = strings;
 class UploadFoundation extends BaseFoundation {
+  /**
+   * Unify all fileList commits: keep _latestFileList in sync synchronously so async
+   * beforeUpload results compose with recent mutations even before React flushes
+   * setState (React 18 automatic batching). (#3335)
+   */
+  updateFileListInternal(newFileList, callback) {
+    if (this._batchFileList) {
+      this._batchFileList = newFileList;
+    }
+    this._latestFileList = newFileList;
+    this._adapter.updateFileList(newFileList, callback);
+  }
+  /** Keep the synchronous snapshot aligned with an externally controlled fileList. */
+  syncLatestFileList(fileList) {
+    this._latestFileList = fileList.slice();
+  }
+  getLatestFileList() {
+    return this._batchFileList || this._latestFileList || this.getState('fileList');
+  }
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.destroyState = false;
@@ -55,10 +74,29 @@ class UploadFoundation extends BaseFoundation {
      * When paste event is successfully handled, we ignore the subsequent keydown event.
      */
     this._pasteHandled = false;
+    /**
+     * Working copy of fileList used during a synchronous startUpload batch.
+     * Do NOT rely on React state fileList here: setState is async (batched in React 18),
+     * so reading getState('fileList') between iterations of a sync loop returns a stale
+     * snapshot and earlier removals get overwritten by later ones (see #3335).
+     * Seeded at the start of startUpload and cleared when the sync loop finishes (see
+     * try/finally in startUpload); async (promise) results fall back to _latestFileList
+     * then React state.
+     */
+    this._batchFileList = null;
+    /**
+     * The most recent fileList produced by handleBeforeUploadResultInObject.
+     * Unlike React state (which is flushed asynchronously under React 18 automatic
+     * batching), this is updated synchronously, so a later async beforeUpload result
+     * composes with earlier sync removals of the same batch instead of reading a stale
+     * snapshot (mixed sync + async beforeUpload results, see #3335).
+     */
+    this._latestFileList = null;
   }
   init() {
     // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
     this.destroyState = false;
+    this.syncLatestFileList(this.getState('fileList'));
     // In controlled mode, parent may keep and pass back fileList with blob url.
     // Sync them into internal map so later remove/clear can revoke correctly.
     this._syncLocalUrlsFromFileList();
@@ -108,6 +146,8 @@ class UploadFoundation extends BaseFoundation {
     if (!disabled) {
       this.unbindPastingHandler();
     }
+    this._batchFileList = null;
+    this._latestFileList = null;
     this.destroyState = true;
   }
   /**
@@ -324,7 +364,7 @@ class UploadFoundation extends BaseFoundation {
       currentFile: newFileItem,
       fileList: newFileList
     });
-    this._adapter.updateFileList(newFileList, () => {
+    this.updateFileListInternal(newFileList, () => {
       this._adapter.resetReplaceInput();
       if (!newFileItem._sizeInvalid) {
         this.upload(newFileItem);
@@ -368,7 +408,7 @@ class UploadFoundation extends BaseFoundation {
       fileList: currentFiles,
       currentFile: currentFiles[0]
     });
-    this._adapter.updateFileList(currentFiles, () => {
+    this.updateFileListInternal(currentFiles, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(currentFiles);
       }
@@ -392,7 +432,7 @@ class UploadFoundation extends BaseFoundation {
         });
       }
     });
-    this._adapter.updateFileList(fileList, () => {
+    this.updateFileListInternal(fileList, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(currentFiles);
       }
@@ -476,7 +516,7 @@ class UploadFoundation extends BaseFoundation {
       fileList: newFileList,
       currentFile: null
     });
-    this._adapter.updateFileList(newFileList, () => {
+    this.updateFileListInternal(newFileList, () => {
       if (uploadTrigger === TRIGGER_AUTO) {
         this.startUpload(fileItemList);
       }
@@ -485,15 +525,24 @@ class UploadFoundation extends BaseFoundation {
   /* istanbul ignore next */
   manualUpload() {
     // find the list of files that have not been uploaded
-    const waitToUploadFileList = this.getState('fileList').filter(item => item.status === FILE_STATUS_WAIT_UPLOAD);
+    const waitToUploadFileList = this.getLatestFileList().filter(item => item.status === FILE_STATUS_WAIT_UPLOAD);
     this.startUpload(waitToUploadFileList);
   }
   startUpload(fileList) {
-    fileList.forEach(file => {
-      if (!file._sizeInvalid) {
-        this.upload(file);
-      }
-    });
+    // Seed a working copy so multiple synchronous beforeUpload results
+    // (e.g. several files returning autoRemove) compose correctly instead of each
+    // reading a stale React state snapshot and overwriting earlier removals. (#3335)
+    // try/finally guarantees the working copy is cleared even if beforeUpload throws.
+    this._batchFileList = this.getLatestFileList().slice();
+    try {
+      fileList.forEach(file => {
+        if (!file._sizeInvalid) {
+          this.upload(file);
+        }
+      });
+    } finally {
+      this._batchFileList = null;
+    }
   }
   upload(file) {
     const {
@@ -504,9 +553,7 @@ class UploadFoundation extends BaseFoundation {
       return;
     }
     if (typeof beforeUpload === 'function') {
-      const {
-        fileList
-      } = this.getStates();
+      const fileList = this.getLatestFileList();
       const buResult = this._adapter.notifyBeforeUpload({
         file,
         fileList
@@ -571,7 +618,11 @@ class UploadFoundation extends BaseFoundation {
       validateMessage,
       fileInstance
     } = buResult;
-    let newFileList = this.getState('fileList').slice();
+    // During a synchronous startUpload batch, read from the working copy; for async
+    // (promise) results read from the most recent synchronous snapshot, falling back
+    // to React state. This keeps mixed sync + async beforeUpload results composing
+    // correctly under React 18 automatic batching. (#3335)
+    let newFileList = this.getLatestFileList().slice();
     if (autoRemove) {
       this._releaseFileUrl(file.uid);
       newFileList = newFileList.filter(item => item.uid !== file.uid);
@@ -593,7 +644,7 @@ class UploadFoundation extends BaseFoundation {
       }
       newFileList[index].shouldUpload = shouldUpload;
     }
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
     this._adapter.notifyChange({
       fileList: newFileList,
       currentFile: file
@@ -707,10 +758,7 @@ class UploadFoundation extends BaseFoundation {
       e,
       fileInstance
     } = _ref2;
-    const {
-      fileList
-    } = this.getStates();
-    const newFileList = fileList.slice();
+    const newFileList = this.getLatestFileList().slice();
     let percent = 0;
     if (e.total > 0) {
       percent = Number((e.loaded / e.total * 100 * numbers.PROGRESS_COEFFICIENT).toFixed(0)) || 0;
@@ -722,7 +770,7 @@ class UploadFoundation extends BaseFoundation {
     newFileList[index].percent = percent;
     newFileList[index].status = FILE_STATUS_UPLOADING;
     this._adapter.notifyProgress(percent, fileInstance, newFileList);
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
     this._adapter.notifyChange({
       fileList: newFileList,
       currentFile: newFileList[index]
@@ -734,9 +782,7 @@ class UploadFoundation extends BaseFoundation {
       xhr,
       fileInstance
     } = _ref3;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
       return;
@@ -764,9 +810,7 @@ class UploadFoundation extends BaseFoundation {
       xhr,
       response
     } = _ref4;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     let body = null;
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
@@ -817,7 +861,7 @@ class UploadFoundation extends BaseFoundation {
       fileList: newFileList,
       currentFile: newFileList[index]
     });
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
   }
   _getFileIndex(file, fileList) {
     return fileList.findIndex(item => item.uid === file.uid);
@@ -845,7 +889,7 @@ class UploadFoundation extends BaseFoundation {
       newFileList.splice(index, 1);
       this._releaseFileUrl(file.uid);
       this._adapter.notifyRemove(file.fileInstance, newFileList, file);
-      this._adapter.updateFileList(newFileList);
+      this.updateFileListInternal(newFileList);
       this._adapter.notifyChange({
         fileList: newFileList,
         currentFile: file
@@ -858,9 +902,7 @@ class UploadFoundation extends BaseFoundation {
       xhr,
       fileInstance
     } = _ref5;
-    const {
-      fileList
-    } = this.getStates();
+    const fileList = this.getLatestFileList();
     const index = this._getFileIndex(fileInstance, fileList);
     if (index < 0) {
       return;
@@ -878,7 +920,7 @@ class UploadFoundation extends BaseFoundation {
     newFileList[index].response = error;
     newFileList[index].event = e;
     this._adapter.notifyError(error, fileInstance, newFileList, xhr);
-    this._adapter.updateFileList(newFileList);
+    this.updateFileListInternal(newFileList);
     this._adapter.notifyChange({
       currentFile: newFileList[index],
       fileList: newFileList
@@ -899,7 +941,7 @@ class UploadFoundation extends BaseFoundation {
         return;
       }
       this._releaseAllFileUrls();
-      this._adapter.updateFileList([]);
+      this.updateFileListInternal([]);
       this._adapter.notifyClear();
       this._adapter.notifyChange({
         fileList: []

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.101.1",
+    "version": "2.103.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14225,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.101.1",
-        "@douyinfe/semi-json-viewer-core": "2.101.1",
+        "@douyinfe/semi-animation": "2.103.0",
+        "@douyinfe/semi-json-viewer-core": "2.103.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14247,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "90a1ea2a8f3bc714279cdaada5fa30e97d8e26d4",
+    "gitHead": "c1e3632b90b242defdfe4bfb267bcfaffbb23295",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/progress/progress.scss

@@ -23,6 +23,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -33,6 +34,12 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            width: 35%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             min-width: $width-progress_line_text;
             font-weight: $font-progress_line_text-fontWeight;
@@ -57,6 +64,7 @@ $module: #{$prefix}-progress;
         .#{$module}-track {
             height: 100%;
             width: 100%;
+            overflow: hidden;
         }
 
         .#{$module}-track-inner {
@@ -67,6 +75,13 @@ $module: #{$prefix}-progress;
             transition-timing-function: $motion-progress-transition_timing_function;
         }
 
+        .#{$module}-track-inner-indeterminate {
+            height: 35%;
+            width: 100%;
+            transition: none;
+            animation: semi-progress-indeterminate-slide-vertical 1.6s ease-in-out infinite;
+        }
+
         .#{$module}-line-text {
             font-weight: $font-progress_line_text-fontWeight;
             margin-top: $spacing-progress_vertical_line_text-marginTop;
@@ -95,6 +110,12 @@ $module: #{$prefix}-progress;
             stroke: $color-progress_track_inner-bg;
         }
 
+        &-ring-inner-indeterminate {
+            transform: rotate(0deg);
+            transform-origin: 50% 50%;
+            animation: semi-progress-indeterminate-rotate 1.2s linear infinite;
+        }
+
         &-text {
             position: absolute;
             top: 50%;
@@ -108,4 +129,42 @@ $module: #{$prefix}-progress;
     }
 }
 
-@import './rtl.scss';
+@keyframes semi-progress-indeterminate-slide {
+    0% {
+        transform: translateX(-120%);
+    }
+
+    55% {
+        transform: translateX(300%);
+    }
+
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-slide-vertical {
+    0% {
+        transform: translateY(-120%);
+    }
+
+    55% {
+        transform: translateY(300%);
+    }
+
+    100% {
+        transform: translateY(300%);
+    }
+}
+
+@keyframes semi-progress-indeterminate-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@import './rtl.scss';