feat: added IE http loading

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 => <Wrapper>{story()}</Wrapper>]
+} as ComponentMeta<typeof IELoading>;
+
+export function Default() { 
+
+  return <IELoading />;
+}
+
+Default.story = {
+  name: 'default'
+};
+

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<HTMLImageElement>;
+
+const GIFContainer = styled.img`
+  width: ${(props) => `${props.width}px`}
+  height: auto;
+`;
+
+const IELoading = (props:ProgressBarProps) => {
+  const { width = 250 } = props
+  return (
+    <>
+      <GIFContainer src={IELoadingGIF} width={width}/>
+    </>
+  )
+}
+
+IELoading.displayName = 'IELoading';
+
+export { IELoading, ProgressBarProps };

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';

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;