kitten.sh
1import React from 'react';
2import styled, { keyframes } from 'styled-components';
3import Docs from '../screens/docs';
4
5const Container = styled.div`
6 height: 100vh;
7 width: 100%;
8`;
9
10const Loader = styled.div`
11 position: relative;
12 margin: 0 auto;
13 width: ${p => p.theme.spacing.xl};
14 top: calc(50% - ${p => p.theme.spacing.xl});
15
16 &:before {
17 content: '';
18 display: block;
19 padding-top: 100%;
20 }
21`;
22
23const rotate = keyframes`
24 100% {
25 transform: rotate(360deg);
26 }
27`;
28
29const dash = keyframes`
30 0% {
31 stroke-dasharray: 1, 200;
32 stroke-dashoffset: 0;
33 }
34 50% {
35 stroke-dasharray: 89, 200;
36 stroke-dashoffset: -35px;
37 }
38 100% {
39 stroke-dasharray: 89, 200;
40 stroke-dashoffset: -124px;
41 }
42`;
43
44const Svg = styled.svg`
45 animation: ${rotate} 2s linear infinite;
46 height: 100%;
47 transform-origin: center center;
48 width: 100%;
49 position: absolute;
50 top: 0;
51 bottom: 0;
52 left: 0;
53 right: 0;
54 margin: auto;
55`;
56
57const Circle = styled.circle`
58 stroke: ${p => p.theme.colors.accent};
59 stroke-dasharray: 1, 200;
60 stroke-dashoffset: 0;
61 animation: ${dash} 1.5s ease-in-out infinite;
62 stroke-linecap: round;
63`;
64
65export const Loading = () => (
66 <Docs isLoading>
67 <Container>
68 <Loader>
69 <Svg className="circular" viewBox="25 25 50 50">
70 <Circle
71 className="path"
72 cx="50"
73 cy="50"
74 r="20"
75 fill="none"
76 strokeWidth="2"
77 strokeMiterlimit="10"
78 />
79 </Svg>
80 </Loader>
81 </Container>
82 </Docs>
83);