forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use CSS keyframe animation for spinner on web (#3411)
* Use css keyframe animation for spinner on web
* duplicate css to index.html
authored by
Samuel Newman
and committed by
GitHub
93b606e5
575f390d
+66
-2
+15
bskyweb/templates/base.html
+15
bskyweb/templates/base.html
···
220
220
.nativeDropdown-item:focus {
221
221
outline: none;
222
222
}
223
+
224
+
/* Spinner component */
225
+
@keyframes rotate {
226
+
0% {
227
+
transform: rotate(0deg);
228
+
}
229
+
100% {
230
+
transform: rotate(360deg);
231
+
}
232
+
}
233
+
.rotate-500ms {
234
+
position: absolute;
235
+
inset:0;
236
+
animation: rotate 500ms linear infinite;
237
+
}
223
238
</style>
224
239
{% include "scripts.html" %}
225
240
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
+2
-2
src/components/Loader.tsx
+2
-2
src/components/Loader.tsx
···
1
1
import React from 'react'
2
2
import Animated, {
3
3
Easing,
4
-
useSharedValue,
5
4
useAnimatedStyle,
5
+
useSharedValue,
6
6
withRepeat,
7
7
withTiming,
8
8
} from 'react-native-reanimated'
9
9
10
-
import {atoms as a, useTheme, flatten} from '#/alf'
10
+
import {atoms as a, flatten, useTheme} from '#/alf'
11
11
import {Props, useCommonSVGProps} from '#/components/icons/common'
12
12
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
13
13
+34
src/components/Loader.web.tsx
+34
src/components/Loader.web.tsx
···
1
+
import React from 'react'
2
+
import {View} from 'react-native'
3
+
4
+
import {atoms as a, flatten, useTheme} from '#/alf'
5
+
import {Props, useCommonSVGProps} from '#/components/icons/common'
6
+
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
7
+
8
+
export function Loader(props: Props) {
9
+
const t = useTheme()
10
+
const common = useCommonSVGProps(props)
11
+
12
+
return (
13
+
<View
14
+
style={[
15
+
a.relative,
16
+
a.justify_center,
17
+
a.align_center,
18
+
{width: common.size, height: common.size},
19
+
]}>
20
+
{/* css rotation animation - /bskyweb/templates/base.html */}
21
+
<div className="rotate-500ms">
22
+
<Icon
23
+
{...props}
24
+
style={[
25
+
a.absolute,
26
+
a.inset_0,
27
+
t.atoms.text_contrast_high,
28
+
flatten(props.style),
29
+
]}
30
+
/>
31
+
</div>
32
+
</View>
33
+
)
34
+
}
+15
web/index.html
+15
web/index.html
···
224
224
.nativeDropdown-item:focus {
225
225
outline: none;
226
226
}
227
+
228
+
/* Spinner component */
229
+
@keyframes rotate {
230
+
0% {
231
+
transform: rotate(0deg);
232
+
}
233
+
100% {
234
+
transform: rotate(360deg);
235
+
}
236
+
}
237
+
.rotate-500ms {
238
+
position: absolute;
239
+
inset:0;
240
+
animation: rotate 500ms linear infinite;
241
+
}
227
242
</style>
228
243
</head>
229
244