diff --git a/src/components/spinner/Spinner.jsx b/src/components/spinner/Spinner.jsx
new file mode 100644
index 0000000..6b1b76f
--- /dev/null
+++ b/src/components/spinner/Spinner.jsx
@@ -0,0 +1,34 @@
+import React,{Component} from 'react'
+import flywheel from './images/flywheel.gif'
+import pinwheel from './images/pinwheel.gif'
+import glowring from './images/glowring.gif'
+import turnsign from './images/turnsign.gif'
+
+
+
+const switchSpinner=(type,children)=>{
+    switch (type){
+        case 'flywheel':
+        return <div><img src={flywheel} alt="Fly wheel" /></div>
+
+        case 'pinwheel':
+        return <img src={pinwheel} alt="Pin Wheel" />
+
+        case 'glowring':
+        return <img src={glowring} alt="Glow Ring" />
+
+        case 'turnsign':
+        return <img src={turnsign} alt="Turn Sign" />
+    }
+}
+    
+
+const Spinner=(props)=>{
+    return (<>{switchSpinner(props.type,props.children)}</>)
+}
+
+Spinner.defaultProps={
+    type:'flywheel'
+}
+
+export default Spinner
\ No newline at end of file
diff --git a/src/components/spinner/images/flywheel.gif b/src/components/spinner/images/flywheel.gif
new file mode 100644
index 0000000..c9d7273
Binary files /dev/null and b/src/components/spinner/images/flywheel.gif differ
diff --git a/src/components/spinner/images/glowring.gif b/src/components/spinner/images/glowring.gif
new file mode 100644
index 0000000..32143eb
Binary files /dev/null and b/src/components/spinner/images/glowring.gif differ
diff --git a/src/components/spinner/images/pinwheel.gif b/src/components/spinner/images/pinwheel.gif
new file mode 100644
index 0000000..b30ffdc
Binary files /dev/null and b/src/components/spinner/images/pinwheel.gif differ
diff --git a/src/components/spinner/images/turnsign.gif b/src/components/spinner/images/turnsign.gif
new file mode 100644
index 0000000..799d191
Binary files /dev/null and b/src/components/spinner/images/turnsign.gif differ
diff --git a/src/demos/SpinnerDemo.jsx b/src/demos/SpinnerDemo.jsx
new file mode 100644
index 0000000..ed3f63d
--- /dev/null
+++ b/src/demos/SpinnerDemo.jsx
@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react'
+import Spinner from '../components/spinner/Spinner'
+import spinnerDocPath from '../docs/spinner.md'
+import ReactMarkdown from 'react-markdown'
+
+const SpinnerDemo=()=>{
+const [markdown,setMarkdown]=useState('')
+
+useEffect(()=>{
+    fetch(spinnerDocPath).then((response)=> response.text()).then((text)=>{
+        setMarkdown(text)
+    })
+
+})
+
+    return (<>
+    <div><ReactMarkdown source={markdown}/>
+    <Spinner />
+    <Spinner type="glowring"/>
+    <Spinner type="pinwheel"/>
+    <Spinner type="turnsign"/></div>
+    </>)
+
+}
+
+export default SpinnerDemo
\ No newline at end of file
diff --git a/src/docs/spinner.md b/src/docs/spinner.md
new file mode 100644
index 0000000..dc457d9
--- /dev/null
+++ b/src/docs/spinner.md
@@ -0,0 +1,21 @@
+## Usage
+```
+import React from 'react'
+import Heading from '../components/Heading'
+
+function App() {
+  return (
+    <div className="App">
+       <Heading type='h3'> I'm an h3 header </Heading>
+    </div>
+  );
+}
+```
+## Properties
+
+Property | Type | Required | Default value | Description
+:--- | :--- | :--- | :--- | :---
+`children`|children|no|empty| Text/children of heading
+`type`|string|no|flywheel| pinwheel,glowring,turnsign,flywheel
+
+### Demo
\ No newline at end of file