Use CSS keyframe animation for spinner on web (#3411)
* Use css keyframe animation for spinner on web * duplicate css to index.htmlzio/stable
parent
575f390d7b
commit
93b606e55a
|
@ -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">
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue