michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loop and improve animations

Browse Source
This commit is contained in:
controlol 2021-11-01 21:28:27 +01:00
parent 320d2666ec
commit dfc83360e5
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/LineLoader.jsx
View File

@ -2,19 +2,19 @@ import styled, { keyframes } from 'styled-components'
const BarWidthAnimation = keyframes` const BarWidthAnimation = keyframes`
0% { 0% {
width: 40%; width: 70%;
} }
100% { 100% {
width: 25%; width: 30%;
} }
` `
const BarPositionAnimation = keyframes` const BarPositionAnimation = keyframes`
0% { 0% {
left: -50%; left: -35%;
} }
100% { 100% {
left: 100%; left: 135%;
} }
` `
@ -40,7 +40,8 @@ const LoaderContainer = styled.div`
::after { ::after {
background-color: var(--secondary-color); background-color: var(--secondary-color);
animation: ${BarWidthAnimation} 8s, ${BarPositionAnimation} 3s; transform: translateX(-50%);
animation: ${BarWidthAnimation} 2s infinite alternate, ${BarPositionAnimation} 2s infinite;
} }
` `