@alifd/chat 0.3.0-beta.5 → 0.3.0-beta.7

package/es/index.d.ts

@@ -14,8 +14,9 @@ export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
 export { default as ImagePreview } from './image-preview';
-export { default as HtmlRenderer } from './html-render';
+export { default as HtmlRender } from './html-render';
 export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
+export { default as Loading } from './loading';
 export declare const version: string;

package/es/index.js

@@ -14,8 +14,9 @@ export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
 export { default as ImagePreview } from './image-preview';
-export { default as HtmlRenderer } from './html-render';
+export { default as HtmlRender } from './html-render';
 export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
-export const version = '0.3.0-beta.5';
+export { default as Loading } from './loading';
+export const version = '0.3.0-beta.7';

package/es/loading/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @component 加载
+ * @en Loading
+ * * @remarks 同 Next Loading- Same as Next Loading component.
+ * @type 通用 - General
+ * @when
+ */
+import React from 'react';
+import type { LoadingProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<LoadingProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element | React.ReactNode[];
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>>, "key" | keyof LoadingProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element | React.ReactNode[];
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>, {}>;
+export default _default;

package/es/loading/index.js

@@ -0,0 +1,29 @@
+/**
+ * @component 加载
+ * @en Loading
+ * * @remarks 同 Next Loading- Same as Next Loading component.
+ * @type 通用 - General
+ * @when
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Loading as NextLoading, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Loading = forwardRef((_a, ref) => {
+    var { className, indicator, shape = 'default', size = 'large' } = _a, props = __rest(_a, ["className", "indicator", "shape", "size"]);
+    let indicatorDom = indicator;
+    const nextProps = Object.assign(Object.assign({}, props), { size });
+    if (!indicator && shape && shape !== 'default') {
+        const indicatorClass = `load-container ${shape}`;
+        indicatorDom = (React.createElement("div", { className: indicatorClass },
+            React.createElement("div", { className: "loader" })));
+        nextProps.indicator = indicatorDom;
+    }
+    return (React.createElement(NextLoading, Object.assign({}, nextProps, { ref: ref, className: cs(`${PREFIX_DEFAULT}loading ${size} ${shape}`, className) })));
+});
+const LoadingWithSub = assignSubComponent(Loading, {
+    displayName: 'Loading',
+});
+export * from './types';
+export default ConfigProvider.config(LoadingWithSub);

package/es/loading/main.scss

@@ -0,0 +1,227 @@
+@import "../core/variables.scss";
+
+.#{$prefix}loading {
+  .load-container {
+    margin: 0 auto;
+    position: relative;
+  }
+
+  &.medium {
+      /* animation 1 */
+    .bar .loader,
+    .bar .loader:before,
+    .bar .loader:after {
+      width: 0.5em;
+      height: 1em;
+      border-radius: 0.5em;
+    }
+
+    .bar .loader:before,
+    .bar .loader:after {
+    }
+    .bar .loader:before {
+      left: -0.8em;
+    }
+    .bar .loader {
+    }
+    .bar .loader:after {
+      left: 0.8em;
+    }
+    @-webkit-keyframes bar {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0 ;
+        height: 1em;
+      }
+      40% {
+        box-shadow: 0 -1em ;
+        height: 1.2em;
+      }
+    }
+    @keyframes bar {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0 ;
+        height: 1em;
+      }
+      40% {
+        box-shadow: 0 -1em ;
+        height: 1.2em;
+      }
+    }
+    /* animation 2 */
+    .dot .loader:before,
+    .dot .loader:after,
+    .dot .loader {
+      width: 1em;
+      height: 1em;
+      // top: -1em;
+    }
+    .dot .loader:before {
+      left: -1.5em;
+    }
+    .dot .loader:after {
+      left: 1.5em;
+    }
+
+    @-webkit-keyframes dot {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 1 0 -0.5em $color-brand1-6;
+      }
+      40% {
+        box-shadow: 0 1 0 0 $color-brand1-6;
+      }
+    }
+
+    @keyframes dot {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 1em 0 -0.5em $color-brand1-6;
+      }
+      40% {
+        box-shadow: 0 1em 0 0 $color-brand1-6;
+      }
+    }
+  }
+
+    /* animation 1 */
+  .bar .loader,
+  .bar .loader:before,
+  .bar .loader:after {
+    background: $color-brand1-6;
+    color: $color-brand1-6;
+    -webkit-animation: bar 1s infinite ease-in-out;
+    animation: bar 1s infinite ease-in-out;
+    width: 0.8em;
+    height: 2em;
+    border-radius: 0.8em;
+  }
+
+  .bar .loader:before,
+  .bar .loader:after {
+    position: absolute;
+    top: 0;
+    content: '';
+  }
+  .bar .loader:before {
+    left: -1em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .bar .loader {
+    text-indent: -9999em;
+    margin: 0 auto !important;
+    position: relative;
+    font-size: 11px;
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  .bar .loader:after {
+    left: 1em;
+  }
+  @-webkit-keyframes bar {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0 ;
+      height: 2em;
+    }
+    40% {
+      box-shadow: 0 -1.5em ;
+      height: 2.2em;
+    }
+  }
+  @keyframes bar {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0 ;
+      height: 2em;
+    }
+    40% {
+      box-shadow: 0 -1.5em ;
+      height: 2.2em;
+    }
+  }
+  /* animation 2 */
+  .dot .loader:before,
+  .dot .loader:after,
+  .dot .loader {
+    border-radius: 50%;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: dot 1.8s infinite ease-in-out;
+    animation: dot 1.8s infinite ease-in-out;
+    top: -1.5em;
+
+    &.medium {
+      width: 1.0em;
+      height: 1.0em;
+      top: -1.0em;
+    }
+  }
+
+  .dot .loader {
+    margin: 0 auto !important;
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  .dot .loader:before {
+    left: -2em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+
+    &.medium {
+      left: -1.5em;
+    }
+  }
+
+  .dot .loader:after {
+    left: 2em;
+    &.medium {
+      left: 1.5em;
+    }
+  }
+
+  .dot .loader:before,
+  .dot .loader:after {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+
+  @-webkit-keyframes dot {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
+    }
+    40% {
+      box-shadow: 0 1.5em 0 0 $color-brand1-6;
+    }
+  }
+
+  @keyframes dot {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
+    }
+    40% {
+      box-shadow: 0 1.5em 0 0 $color-brand1-6;
+    }
+  }
+}
+
+

package/es/loading/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/loading/style2';
+import './main.scss';

package/es/loading/style.js

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/loading/style2';
+import './main.scss';

package/es/loading/types.d.ts

@@ -0,0 +1,8 @@
+import { type CommonProps } from '@alifd/next';
+import type { LoadingProps as FusionLoadingProps } from '@alifd/next/types/loading';
+/**
+ * @api Loading
+ */
+export interface LoadingProps extends FusionLoadingProps, CommonProps {
+    shape?: 'default' | 'bar' | 'dot';
+}

package/es/loading/types.js

@@ -0,0 +1 @@
+export {};

package/lib/index.d.ts

@@ -14,8 +14,9 @@ export { default as Icon } from './icon';
 export { default as Balloon } from './balloon';
 export { default as List } from './list';
 export { default as ImagePreview } from './image-preview';
-export { default as HtmlRenderer } from './html-render';
+export { default as HtmlRender } from './html-render';
 export { default as Markdown } from './markdown';
 export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
+export { default as Loading } from './loading';
 export declare const version: string;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRenderer = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+exports.version = exports.Loading = exports.Origin = exports.CardLoading = exports.Markdown = exports.HtmlRender = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
 const tslib_1 = require("tslib");
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
@@ -35,11 +35,13 @@ Object.defineProperty(exports, "List", { enumerable: true, get: function () { re
 var image_preview_1 = require("./image-preview");
 Object.defineProperty(exports, "ImagePreview", { enumerable: true, get: function () { return tslib_1.__importDefault(image_preview_1).default; } });
 var html_render_1 = require("./html-render");
-Object.defineProperty(exports, "HtmlRenderer", { enumerable: true, get: function () { return tslib_1.__importDefault(html_render_1).default; } });
+Object.defineProperty(exports, "HtmlRender", { enumerable: true, get: function () { return tslib_1.__importDefault(html_render_1).default; } });
 var markdown_1 = require("./markdown");
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return tslib_1.__importDefault(markdown_1).default; } });
 var card_loading_1 = require("./card-loading");
 Object.defineProperty(exports, "CardLoading", { enumerable: true, get: function () { return tslib_1.__importDefault(card_loading_1).default; } });
 var origin_1 = require("./origin");
 Object.defineProperty(exports, "Origin", { enumerable: true, get: function () { return tslib_1.__importDefault(origin_1).default; } });
-exports.version = '0.3.0-beta.5';
+var loading_1 = require("./loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return tslib_1.__importDefault(loading_1).default; } });
+exports.version = '0.3.0-beta.7';

package/lib/loading/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @component 加载
+ * @en Loading
+ * * @remarks 同 Next Loading- Same as Next Loading component.
+ * @type 通用 - General
+ * @when
+ */
+import React from 'react';
+import type { LoadingProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<LoadingProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element | React.ReactNode[];
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>>, "key" | keyof LoadingProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/loading").LoadingProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element | React.ReactNode[];
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/loading").LoadingProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/loading").LoadingProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/loading").LoadingProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>, {}>;
+export default _default;

package/lib/loading/index.js

@@ -0,0 +1,31 @@
+"use strict";
+/**
+ * @component 加载
+ * @en Loading
+ * * @remarks 同 Next Loading- Same as Next Loading component.
+ * @type 通用 - General
+ * @when
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Loading = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, indicator, shape = 'default', size = 'large' } = _a, props = tslib_1.__rest(_a, ["className", "indicator", "shape", "size"]);
+    let indicatorDom = indicator;
+    const nextProps = Object.assign(Object.assign({}, props), { size });
+    if (!indicator && shape && shape !== 'default') {
+        const indicatorClass = `load-container ${shape}`;
+        indicatorDom = (react_1.default.createElement("div", { className: indicatorClass },
+            react_1.default.createElement("div", { className: "loader" })));
+        nextProps.indicator = indicatorDom;
+    }
+    return (react_1.default.createElement(next_1.Loading, Object.assign({}, nextProps, { ref: ref, className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}loading ${size} ${shape}`, className) })));
+});
+const LoadingWithSub = (0, utils_1.assignSubComponent)(Loading, {
+    displayName: 'Loading',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(LoadingWithSub);

package/lib/loading/main.scss

@@ -0,0 +1,227 @@
+@import "../core/variables.scss";
+
+.#{$prefix}loading {
+  .load-container {
+    margin: 0 auto;
+    position: relative;
+  }
+
+  &.medium {
+      /* animation 1 */
+    .bar .loader,
+    .bar .loader:before,
+    .bar .loader:after {
+      width: 0.5em;
+      height: 1em;
+      border-radius: 0.5em;
+    }
+
+    .bar .loader:before,
+    .bar .loader:after {
+    }
+    .bar .loader:before {
+      left: -0.8em;
+    }
+    .bar .loader {
+    }
+    .bar .loader:after {
+      left: 0.8em;
+    }
+    @-webkit-keyframes bar {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0 ;
+        height: 1em;
+      }
+      40% {
+        box-shadow: 0 -1em ;
+        height: 1.2em;
+      }
+    }
+    @keyframes bar {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0 ;
+        height: 1em;
+      }
+      40% {
+        box-shadow: 0 -1em ;
+        height: 1.2em;
+      }
+    }
+    /* animation 2 */
+    .dot .loader:before,
+    .dot .loader:after,
+    .dot .loader {
+      width: 1em;
+      height: 1em;
+      // top: -1em;
+    }
+    .dot .loader:before {
+      left: -1.5em;
+    }
+    .dot .loader:after {
+      left: 1.5em;
+    }
+
+    @-webkit-keyframes dot {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 1 0 -0.5em $color-brand1-6;
+      }
+      40% {
+        box-shadow: 0 1 0 0 $color-brand1-6;
+      }
+    }
+
+    @keyframes dot {
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 1em 0 -0.5em $color-brand1-6;
+      }
+      40% {
+        box-shadow: 0 1em 0 0 $color-brand1-6;
+      }
+    }
+  }
+
+    /* animation 1 */
+  .bar .loader,
+  .bar .loader:before,
+  .bar .loader:after {
+    background: $color-brand1-6;
+    color: $color-brand1-6;
+    -webkit-animation: bar 1s infinite ease-in-out;
+    animation: bar 1s infinite ease-in-out;
+    width: 0.8em;
+    height: 2em;
+    border-radius: 0.8em;
+  }
+
+  .bar .loader:before,
+  .bar .loader:after {
+    position: absolute;
+    top: 0;
+    content: '';
+  }
+  .bar .loader:before {
+    left: -1em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .bar .loader {
+    text-indent: -9999em;
+    margin: 0 auto !important;
+    position: relative;
+    font-size: 11px;
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  .bar .loader:after {
+    left: 1em;
+  }
+  @-webkit-keyframes bar {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0 ;
+      height: 2em;
+    }
+    40% {
+      box-shadow: 0 -1.5em ;
+      height: 2.2em;
+    }
+  }
+  @keyframes bar {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0 ;
+      height: 2em;
+    }
+    40% {
+      box-shadow: 0 -1.5em ;
+      height: 2.2em;
+    }
+  }
+  /* animation 2 */
+  .dot .loader:before,
+  .dot .loader:after,
+  .dot .loader {
+    border-radius: 50%;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: dot 1.8s infinite ease-in-out;
+    animation: dot 1.8s infinite ease-in-out;
+    top: -1.5em;
+
+    &.medium {
+      width: 1.0em;
+      height: 1.0em;
+      top: -1.0em;
+    }
+  }
+
+  .dot .loader {
+    margin: 0 auto !important;
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  .dot .loader:before {
+    left: -2em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+
+    &.medium {
+      left: -1.5em;
+    }
+  }
+
+  .dot .loader:after {
+    left: 2em;
+    &.medium {
+      left: 1.5em;
+    }
+  }
+
+  .dot .loader:before,
+  .dot .loader:after {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+
+  @-webkit-keyframes dot {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
+    }
+    40% {
+      box-shadow: 0 1.5em 0 0 $color-brand1-6;
+    }
+  }
+
+  @keyframes dot {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 1.5em 0 -0.8em $color-brand1-6;
+    }
+    40% {
+      box-shadow: 0 1.5em 0 0 $color-brand1-6;
+    }
+  }
+}
+
+

package/lib/loading/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/loading/style2';
+import './main.scss';

package/lib/loading/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/loading/style2");
+require("./main.scss");

package/lib/loading/types.d.ts

@@ -0,0 +1,8 @@
+import { type CommonProps } from '@alifd/next';
+import type { LoadingProps as FusionLoadingProps } from '@alifd/next/types/loading';
+/**
+ * @api Loading
+ */
+export interface LoadingProps extends FusionLoadingProps, CommonProps {
+    shape?: 'default' | 'bar' | 'dot';
+}

package/lib/loading/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.0-beta.5",
+  "version": "0.3.0-beta.7",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -301,6 +301,18 @@
     "./image-preview/style.js": {
       "import": "./es/image-preview/style.js",
       "require": "./lib/image-preview/style.js"
+    },
+    "./loading": {
+      "import": "./es/loading/index.js",
+      "require": "./lib/loading/index.js"
+    },
+    "./loading/style": {
+      "import": "./es/loading/style.js",
+      "require": "./lib/loading/style.js"
+    },
+    "./loading/style.js": {
+      "import": "./es/loading/style.js",
+      "require": "./lib/loading/style.js"
     }
   },
   "files": [