Smooth Progress Tracking in React: A Guide to Gradient Animations

4 min readMay 23, 2024

Requirements

We need a component to show the progress of a flow and inform users about what’s happening behind the scenes. This helps manage user expectations during longer processes, improving the user experience by reducing perceived waiting times. It’s important for this component to be responsive and accessible to ensure a positive experience across all devices and for all users.

Step 1: Text Gradient Animation

To create a text gradient animation, we need to:

Define the gradient animation using CSS keyframes.
Apply the animation to the current step’s text in the React component.

Define the Gradient Animation

import { keyframes } from '@emotion/react';

const gradient = keyframes`
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
`;

const fadeIn = keyframes`
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
`;

Create the ProcessingSteps Component

import React from 'react';
import { Box, Typography } from '@mui/material';
import DoneIcon from '@mui/icons-material/Done';
import { green, blueGrey } from '@mui/material/colors';

const ProcessingSteps = ({ currentStep }) => {
    const steps = [
        "Uploading Answers",
        "Analyzing Answers",
        "Getting the Grades"
    ];

    return (
        <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            position: 'relative',
            height: 'auto' // Adjust based on content
        }}>
            {steps.map((step, index) => (
                <Box
                    key={index}
                    sx={{
                        fontSize: index === currentStep ? '2em' : '1.5em',
                        color: index < currentStep ? green[400] : (index === currentStep ? 'black' : blueGrey[700]),
                        position: 'relative',
                        display: 'flex',
                        alignItems: 'center',
                        marginTop: index === 0 ? 0 : '20px',
                        animation: `${index < currentStep || index > currentStep ? fadeIn : ''} 0.5s ease-in`,
                        background: index === currentStep ? 'linear-gradient(270deg, #FF8A8A, #FFD084)' : 'none',
                        backgroundClip: index === currentStep ? 'text' : 'none',
                        textFillColor: index === currentStep ? 'transparent' : 'inherit',
                        animation: index === currentStep ? `${gradient} 10s infinite, ${fadeIn} 0.5s ease-in` : `${fadeIn} 0.5s ease-in`,
                        backgroundSize: '200% 200%',
                    }}
                >
                    {index < currentStep && <DoneIcon sx={{ fontSize: '1.2em', color: green[400], marginRight: '10px' }} />}
                    <Box>{step}</Box>
                </Box>
            ))}
        </Box>
    );
};

export default ProcessingSteps;

Example Usage

import React, { useState, useEffect } from 'react';
import ProcessingSteps from './ProcessingSteps';
import { Box, Typography } from '@mui/material';

const ExamProgress = () => {
    const [currentStep, setCurrentStep] = useState(0);

    useEffect(() => {
        // Simulate the steps progression
        const interval = setInterval(() => {
            setCurrentStep(prevStep => (prevStep < 2 ? prevStep + 1 : prevStep));
        }, 3000); // Change step every 3 seconds

        return () => clearInterval(interval);
    }, []);

    return (
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100vh - 64px)' }}> {/* Adjusting for navbar height */}
            <Box sx={{ width: '80%', maxWidth: '600px' }}> {/* Adjust width to your preference */}
                <Typography variant="h4" align="center" gutterBottom>
                    Exam Progress
                </Typography>
                <ProcessingSteps currentStep={currentStep} />
            </Box>
        </Box>
    );
};

export default ExamProgress;

Explanation

Gradient Animation:

The gradient keyframes define the movement of the gradient background.
The animation property in the sx prop applies this gradient animation to the current step’s text.

Smooth Transition with Ease-In Animation:

The fadeIn keyframes define a smooth ease-in animation for the steps.
This animation is applied to completed and upcoming steps for a smoother transition.

This component and example usage demonstrate how to create a responsive, accessibility-friendly progress indicator with gradient animations to enhance the user experience during waiting times.

Empower Your Tech Journey:

Explore a wealth of knowledge designed to elevate your tech projects and understanding. From safeguarding your applications to mastering serverless architecture, discover articles that resonate with your ambition.

New Projects or Consultancy

For new project collaborations or bespoke consultancy services, reach out directly and let’s transform your ideas into reality. Ready to take your project to the next level?

Email me at one@upskyrocket.com
Visit My Partner In Tech for custom solutions