带有用户进度指示器的颤动自定义AppBar显示屏

import React, { useState } from 'react';
import { AppBar, Toolbar, Typography, CircularProgress, IconButton } from '@material-ui/core';
import { AlertCircle as AlertCircleIcon } from 'mdi-react';
import './App.css';

function App() {
  const [progress, setProgress] = useState(0);
  const [isShaking, setIsShaking] = useState(false);

  const startProgress = () => {
    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      setProgress(progress);
      if (progress >= 100) {
        clearInterval(interval);
        setIsShaking(true);
        setTimeout(() => setIsShaking(false), 1000);
      }
    }, 500);
  };

  return (
    <div className="App">
      <AppBar position="static" className={`app-bar ${isShaking ? 'shaking' : ''}`}>
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <AlertCircleIcon />
          </IconButton>
          <Typography variant="h6">My App</Typography>
          <div style={{ flexGrow: 1 }} />
          {progress < 100 && (
            <CircularProgress variant="determinate" value={progress} style={{ color: 'white' }} />
          )}
        </Toolbar>
      </AppBar>
      <button onClick={startProgress}>Start Progress</button>
    </div>
  );
}

export default App;

.app-bar {
  transition: transform 0.1s ease-in-out;
}

.app-bar.shaking {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}