div {
47 | width: calc(${resolvedWidth} / 6);
48 | height: calc(${resolvedHeight} / 6);
49 | background-color: ${color};
50 | border-radius: 50%;
51 | animation: ${fade} ${duration} alternate ease-in-out infinite;
52 | }
53 |
54 | & > div:nth-of-type(2),
55 | & > div:nth-of-type(4) {
56 | animation-delay: calc(${duration} / 6);
57 | }
58 |
59 | & > div:nth-of-type(3),
60 | & > div:nth-of-type(5),
61 | & > div:nth-of-type(7) {
62 | animation-delay: calc(${duration} / 3);
63 | }
64 |
65 | & > div:nth-of-type(6),
66 | & > div:nth-of-type(8) {
67 | animation-delay: calc(${duration} / 2);
68 | }
69 |
70 | & > div:nth-of-type(9) {
71 | animation-delay: calc(${duration} * 2 / 3);
72 | }
73 | ` + ` ${className}`
74 | }
75 | >
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | );
87 | };
88 |
89 | export default FadingDots;
90 |
--------------------------------------------------------------------------------
/src/FillingBottle.tsx:
--------------------------------------------------------------------------------
1 | import { css, keyframes } from "goober";
2 |
3 | import React from "react";
4 |
5 | const spin = keyframes`
6 | 50%,
7 | 100% {
8 | transform: rotate(360deg);
9 | }
10 | `;
11 |
12 | const fill = keyframes`
13 | 25%,
14 | 50% {
15 | transform: scaleY(0);
16 | }
17 | 100% {
18 | transform: scaleY(1);
19 | }
20 | `;
21 |
22 | export interface FillingBottleProps {
23 | className?: string;
24 | color?: string;
25 | width?: number | string;
26 | height?: number | string;
27 | style?: React.CSSProperties;
28 | duration?: string;
29 | }
30 |
31 | const FillingBottle: React.FC