Use CSS keyframe animation for spinner on web (#3411)

* Use css keyframe animation for spinner on web

* duplicate css to index.html
zio/stable
Samuel Newman 2024-04-04 23:18:06 +01:00 committed by GitHub
parent 575f390d7b
commit 93b606e55a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 66 additions and 2 deletions

View File

@ -220,6 +220,21 @@
.nativeDropdown-item:focus { .nativeDropdown-item:focus {
outline: none; outline: none;
} }
/* Spinner component */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate-500ms {
position: absolute;
inset:0;
animation: rotate 500ms linear infinite;
}
</style> </style>
{% include "scripts.html" %} {% include "scripts.html" %}
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

View File

@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import Animated, { import Animated, {
Easing, Easing,
useSharedValue,
useAnimatedStyle, useAnimatedStyle,
useSharedValue,
withRepeat, withRepeat,
withTiming, withTiming,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {atoms as a, useTheme, flatten} from '#/alf' import {atoms as a, flatten, useTheme} from '#/alf'
import {Props, useCommonSVGProps} from '#/components/icons/common' import {Props, useCommonSVGProps} from '#/components/icons/common'
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader' import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'

View File

@ -0,0 +1,34 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, flatten, useTheme} from '#/alf'
import {Props, useCommonSVGProps} from '#/components/icons/common'
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
export function Loader(props: Props) {
const t = useTheme()
const common = useCommonSVGProps(props)
return (
<View
style={[
a.relative,
a.justify_center,
a.align_center,
{width: common.size, height: common.size},
]}>
{/* css rotation animation - /bskyweb/templates/base.html */}
<div className="rotate-500ms">
<Icon
{...props}
style={[
a.absolute,
a.inset_0,
t.atoms.text_contrast_high,
flatten(props.style),
]}
/>
</div>
</View>
)
}

View File

@ -224,6 +224,21 @@
.nativeDropdown-item:focus { .nativeDropdown-item:focus {
outline: none; outline: none;
} }
/* Spinner component */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate-500ms {
position: absolute;
inset:0;
animation: rotate 500ms linear infinite;
}
</style> </style>
</head> </head>