diff --git a/src/packages/loading/__test__/loading.spec.tsx b/src/packages/loading/__test__/loading.spec.tsx
index 74fb492abf..41986cec31 100644
--- a/src/packages/loading/__test__/loading.spec.tsx
+++ b/src/packages/loading/__test__/loading.spec.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
+
 import { Star } from '@nutui/icons-react'
 import { Loading } from '../loading'
-import data from '@/packages/lottie/animation/light/loading.json'
 
 test('type test', () => {
   const { container } = render(<Loading type="circular" />)
@@ -30,19 +30,3 @@ test('custom icon test', () => {
   )
   expect(container.querySelector('svg')).toHaveClass('nut-icon-Star')
 })
-
-test('use lottie', () => {
-  const { container } = render(
-    <Loading
-      direction="vertical"
-      type="lottie"
-      jsonData={data}
-      lottieProps={{ autoplay: false, loop: false }}
-    >
-      正在奋力加载中，感谢您的等待
-    </Loading>
-  )
-  expect(container.querySelectorAll('g')[0].getAttribute('id')).toContain(
-    'lottie'
-  )
-})
diff --git a/src/packages/loading/demos/h5/demo1.tsx b/src/packages/loading/demos/h5/demo1.tsx
index a15b66b067..b7e29de34f 100644
--- a/src/packages/loading/demos/h5/demo1.tsx
+++ b/src/packages/loading/demos/h5/demo1.tsx
@@ -1,28 +1,22 @@
 import React from 'react'
-import { Cell, Loading } from '@nutui/nutui-react'
-import data from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json'
+import { Cell, Loading, Lottie } from '@nutui/nutui-react'
+import lightLoading from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json'
 
 const Demo1 = () => {
   return (
     <>
       <Cell>
         <Loading type="circular" />
-      </Cell>
-      <Cell>
         <Loading type="spinner" />
       </Cell>
-      <Cell>
-        <Loading direction="vertical" type="lottie" jsonData={data} />
-      </Cell>
       <Cell>
         <Loading
-          direction="vertical"
-          type="lottie"
-          jsonData={data}
-          lottieProps={{ autoplay: false, loop: false }}
-        >
-          正在奋力加载中，感谢您的等待
-        </Loading>
+          icon={
+            <>
+              <Lottie source={lightLoading} style={{ width: 56, height: 56 }} />
+            </>
+          }
+        />
       </Cell>
     </>
   )
diff --git a/src/packages/loading/demos/taro/demo1.tsx b/src/packages/loading/demos/taro/demo1.tsx
index 659f047f6c..39fd907989 100644
--- a/src/packages/loading/demos/taro/demo1.tsx
+++ b/src/packages/loading/demos/taro/demo1.tsx
@@ -1,38 +1,23 @@
 import React from 'react'
-import { Cell, Loading } from '@nutui/nutui-react-taro'
-import data from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json'
+import { Loading, Cell, Lottie } from '@nutui/nutui-react-taro'
+import lightLoading from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json'
 
 const Demo1 = () => {
   return (
     <>
       <Cell>
         <Loading type="circular" />
-      </Cell>
-      <Cell>
         <Loading type="spinner" />
       </Cell>
       <Cell>
         <Loading
-          direction="vertical"
-          type="lottie"
-          jsonData={data}
-          lottieProps={{ style: { width: 56, height: 56 } }}
+          icon={
+            <>
+              <Lottie source={lightLoading} style={{ width: 56, height: 56 }} />
+            </>
+          }
         />
       </Cell>
-      <Cell>
-        <Loading
-          direction="vertical"
-          type="lottie"
-          jsonData={data}
-          lottieProps={{
-            autoPlay: false,
-            loop: false,
-            style: { width: 56, height: 56 },
-          }}
-        >
-          正在奋力加载中，感谢您的等待
-        </Loading>
-      </Cell>
     </>
   )
 }
diff --git a/src/packages/loading/loading.scss b/src/packages/loading/loading.scss
index 92415b4f76..9b4c694b4a 100644
--- a/src/packages/loading/loading.scss
+++ b/src/packages/loading/loading.scss
@@ -22,13 +22,6 @@
     }
   }
 
-  .nut-loading-lottie-box {
-    width: 56px;
-    height: 56px;
-    border-radius: $radius-base;
-    background: $loading-lottie-background;
-  }
-
   .nut-loading-text {
     color: $loading-color;
     font-size: $loading-font-size;
diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx
index 5405d58f57..1d9b3c27c0 100644
--- a/src/packages/loading/loading.taro.tsx
+++ b/src/packages/loading/loading.taro.tsx
@@ -1,15 +1,12 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import classNames from 'classnames'
 import {
   Loading as IconLoading,
   Loading1 as IconLoading1,
 } from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components'
-import Lottie from '../lottie/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
-import { TaroLoadingProps, LoadingRef, LoadingType } from '@/types'
-import { mergeProps } from '@/utils/merge-props'
-import { LottieProps } from '@/packages/lottie' // 方便以后扩展设置为键值对形式
+import { LoadingRef, LoadingType, TaroLoadingProps } from '@/types'
 
 // 方便以后扩展设置为键值对形式
 const loadingMap: { [key in LoadingType]?: any } = {
@@ -22,7 +19,6 @@ const defaultProps = {
   // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标
   type: 'circular',
   direction: 'horizontal',
-  lottieProps: {},
 } as TaroLoadingProps
 const defaultLottieProps = {
   loop: true,
@@ -30,42 +26,18 @@ const defaultLottieProps = {
 }
 export const Loading = React.forwardRef<LoadingRef, Partial<TaroLoadingProps>>(
   (props, ref) => {
-    const {
-      className,
-      style,
-      children,
-      direction,
-      icon,
-      lottieProps,
-      ...rest
-    } = {
+    const { className, style, children, direction, icon, ...rest } = {
       ...defaultProps,
       ...props,
     }
-    // @ts-ignore
-    const loadingLottieRef: React.MutableRefObject<LottieProps | null> =
-      useRef()
-    const mergedLottieProps = mergeProps(defaultLottieProps, lottieProps)
-    React.useImperativeHandle(ref, () => loadingLottieRef)
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
-      if (rest.type === 'lottie' && rest.jsonData) {
-        return (
-          <Lottie
-            {...mergedLottieProps}
-            // @ts-ignore
-            ref={loadingLottieRef}
-            source={rest.jsonData}
-          />
-        )
-      }
       const LoadingIcon = loadingMap[rest.type] || IconLoading1
       return <LoadingIcon className={`${classPrefix}-icon`} />
     }
     const iconboxClassName = () => {
-      if (rest.type === 'lottie') return `${classPrefix}-lottie-box`
-      return `${classPrefix}-icon-box`
+      return !icon ? `${classPrefix}-icon-box` : ''
     }
     return (
       <View
diff --git a/src/packages/loading/loading.tsx b/src/packages/loading/loading.tsx
index e3edd95db5..63fe596efe 100644
--- a/src/packages/loading/loading.tsx
+++ b/src/packages/loading/loading.tsx
@@ -1,13 +1,11 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import classNames from 'classnames'
 import {
   Loading as IconLoading,
   Loading1 as IconLoading1,
 } from '@nutui/icons-react'
-import Lottie, { LottieProps } from '../lottie'
 import { ComponentDefaults } from '@/utils/typings'
-import { WebLoadingProps, LoadingRef } from '@/types'
-import { mergeProps } from '@/utils/merge-props' // 方便以后扩展设置为键值对形式
+import { LoadingRef, WebLoadingProps } from '@/types' // 方便以后扩展设置为键值对形式
 
 // 方便以后扩展设置为键值对形式
 const loadingMap = {
@@ -28,45 +26,18 @@ const defaultLottieProps = {
 }
 export const Loading = React.forwardRef<LoadingRef, Partial<WebLoadingProps>>(
   (props, ref) => {
-    const {
-      className,
-      style,
-      children,
-      direction,
-      icon,
-      lottieProps,
-      ...rest
-    } = {
+    const { className, style, children, direction, icon, ...rest } = {
       ...defaultProps,
       ...props,
     }
-    const loadingLottieRef = useRef<LottieProps | null>(null)
-    // @ts-ignore
-    // const loadingLottieRef: React.MutableRefObject<LottieProps | null> =
-    //   useRef()
-    const mergedLottieProps = mergeProps(defaultLottieProps, lottieProps)
-    React.useImperativeHandle(ref, () => loadingLottieRef)
 
     const classPrefix = 'nut-loading'
     const getLoadingIcon = () => {
-      if (!rest.jsonData) {
-        console.warn('Lottie animation requires jsonData prop')
-      }
-      if (rest.type === 'lottie') {
-        return (
-          <Lottie
-            {...mergedLottieProps}
-            ref={loadingLottieRef}
-            source={rest.jsonData}
-          />
-        )
-      }
       const LoadingIcon = loadingMap[rest.type] || IconLoading1
       return <LoadingIcon className={`${classPrefix}-icon`} />
     }
     const iconboxClassName = () => {
-      if (rest.type === 'lottie') return `${classPrefix}-lottie-box`
-      return `${classPrefix}-icon-box`
+      return !icon ? `${classPrefix}-icon-box` : ''
     }
     return (
       <div
diff --git a/src/types/spec/loading/base.ts b/src/types/spec/loading/base.ts
index 9c7a16aabb..a883bc6eb8 100644
--- a/src/types/spec/loading/base.ts
+++ b/src/types/spec/loading/base.ts
@@ -3,7 +3,7 @@ import { BaseProps } from '../../base/props'
 import { Direction } from '../../base/atoms'
 
 export type LoadingRef = any
-export type LoadingType = 'spinner' | 'circular' | 'lottie'
+export type LoadingType = 'spinner' | 'circular'
 
 export interface BaseLoading<LOTTIE_PROPS = any> extends BaseProps {
   type: LoadingType