Added three new components

Signed-off-by: Avior <github@avior.me>

src/Loader/Loader.module.styl

@@ -4,16 +4,11 @@
 	position fixed
 	left 0
 	width 100%
-	height 7px
 	pointer-events none
 	z-index 200
+	transition top .5s ease-in-out
 
 	top 0
+
 	&.hide
-		transition top .5s ease-in-out
 		top -7px
-	div
-		&:not([style="width: 0px;"])
-			transition width 50ms ease-in-out
-		background rgba($main, .7)
-		height 100%

src/Loader/Loader.stories.tsx

@@ -8,14 +8,10 @@ export default {
 	component: Component,
 	parameters: {
 		layout: 'fullscreen'
-	}
+	},
+	argTypes: {
+		percent: { control: 'number'}
+	},
 } as Meta
 
 export const Loader: Story<any> = (args: any) => <Component {...args} />
-
-let tmp = Loader.bind({})
-tmp.args = {
-	auto: {interval : [10, 100], increment: [0, 5]}
-}
-
-export const Auto = tmp

src/Loader/index.tsx

@@ -1,5 +1,6 @@
 import { Router } from 'next/router'
 import React from 'react'
+import ProgressBar from '../ProgressBar'
 import { buildClassName } from '../Util'
 import css from './Loader.module.styl'
 
@@ -42,6 +43,7 @@ export default class Loader extends React.Component<Props, State> {
 	public componentDidMount() {
 		if (this.props.auto) {
 			Router.events.on('routeChangeComplete', this.routeChangeComplete)
+			Router.events.on('routeChangeError', this.routeChangeComplete)
 			Router.events.on('routeChangeStart', this.routeChangeStart)
 		}
 	}
@@ -49,15 +51,16 @@ export default class Loader extends React.Component<Props, State> {
 	public componentWillUnmount() {
 		if (this.props.auto) {
 			Router.events.off('routeChangeComplete', this.routeChangeComplete)
+			Router.events.off('routeChangeError', this.routeChangeComplete)
 			Router.events.off('routeChangeStart', this.routeChangeStart)
 		}
 	}
 
-	public render = () => (
-		<div className={buildClassName(css.div, [css.hide, (this.props.percent || this.state.percent) === 100])}>
-			<div style={{width: (this.props.percent || this.state.percent) ? `${(this.props.percent || this.state.percent)}%` : 0}}></div>
-		</div>
-	)
+	public render = () => <ProgressBar
+			noRoundBorders
+			progress={this.props.percent ?? this.state.percent ?? 0}
+			className={buildClassName(css.div, [css.hide, (this.props.percent ?? this.state.percent) === 100 || (this.props.percent ?? this.state.percent ?? 0) === 0])}
+		/>
 
 	private routeChangeComplete = () => {
 		if (this.interval) {