wehub-resource-sync
29 lines
898 B
TypeScript
29 lines
898 B
TypeScript
import React from 'react';
|
|
|
|
export const PlayingIndicator: React.FC = () => {
|
|
return (
|
|
<div className="flex items-end gap-[2px] h-3 mb-[2px]">
|
|
<style>{`
|
|
@keyframes bounce-1 {
|
|
0%, 100% { height: 2px; }
|
|
50% { height: 12px; }
|
|
}
|
|
@keyframes bounce-2 {
|
|
0%, 100% { height: 12px; }
|
|
50% { height: 4px; }
|
|
}
|
|
@keyframes bounce-3 {
|
|
0%, 100% { height: 6px; }
|
|
50% { height: 12px; }
|
|
}
|
|
.bar-1 { animation: bounce-1 0.8s infinite ease-in-out; }
|
|
.bar-2 { animation: bounce-2 0.85s infinite ease-in-out; }
|
|
.bar-3 { animation: bounce-3 0.9s infinite ease-in-out; }
|
|
`}</style>
|
|
<div className="w-[3px] bg-app-accent bar-1"></div>
|
|
<div className="w-[3px] bg-app-accent bar-2"></div>
|
|
<div className="w-[3px] bg-app-accent bar-3"></div>
|
|
</div>
|
|
);
|
|
};
|