diff --git a/src/IELoading/IELoading.stories.tsx b/src/IELoading/IELoading.stories.tsx new file mode 100644 index 00000000..cba8c31f --- /dev/null +++ b/src/IELoading/IELoading.stories.tsx @@ -0,0 +1,25 @@ +import { ComponentMeta } from '@storybook/react'; +import React from 'react'; +import { IELoading } from 'react95'; +import styled from 'styled-components'; + +const Wrapper = styled.div` + background: ${({ theme }) => theme.material}; + padding: 5rem; +`; + +export default { + title: 'Controls/IELoading', + component: IELoading, + decorators: [story => {story()}] +} as ComponentMeta; + +export function Default() { + + return ; +} + +Default.story = { + name: 'default' +}; + diff --git a/src/IELoading/IELoading.tsx b/src/IELoading/IELoading.tsx new file mode 100644 index 00000000..48698cfb --- /dev/null +++ b/src/IELoading/IELoading.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; +import IELoadingGIF from '../assets/images/IELoading.gif' + +type ProgressBarProps = { + width?: number +} & React.HTMLAttributes; + +const GIFContainer = styled.img` + width: ${(props) => `${props.width}px`} + height: auto; +`; + +const IELoading = (props:ProgressBarProps) => { + const { width = 250 } = props + return ( + <> + + + ) +} + +IELoading.displayName = 'IELoading'; + +export { IELoading, ProgressBarProps }; diff --git a/src/assets/images/IELoading.gif b/src/assets/images/IELoading.gif new file mode 100644 index 00000000..3d0109bd Binary files /dev/null and b/src/assets/images/IELoading.gif differ diff --git a/src/index.ts b/src/index.ts index 4e6b18a0..19242a4e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,6 +31,7 @@ export * from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; export * from './TreeView/TreeView'; export * from './Window/Window'; +export * from './IELoading/IELoading'; /* deprecated components */ export * from './legacy/Bar'; diff --git a/types/globals.d.ts b/types/globals.d.ts index a7285ff5..0410a85c 100644 --- a/types/globals.d.ts +++ b/types/globals.d.ts @@ -3,6 +3,11 @@ declare module '*.png' { export = value; } +declare module '*.gif' { + const value: string; + export = value; +} + declare module '*.woff2' { const value: string; export = value;