ProgressBar

progressbar-1779393693130.tsx

'use client'
import { useEffect, useState } from 'react'

export default function ProgressBar({
  value = 75, animated = true, label = 'Upload Progress',
  color = 'linear-gradient(90deg, #6d28d9, #2563eb)',
}) {
  const [width, setWidth] = useState(0)
  useEffect(() => {
    const t = setTimeout(() => setWidth(value), 200)
    return () => clearTimeout(t)
  }, [value])
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
        <span style={{ fontSize: '13px', fontWeight: 500, color: '#374151' }}>{label}</span>
        <span style={{ fontSize: '13px', fontWeight: 700, color: '#6d28d9' }}>{value}%</span>
      </div>
      <div style={{
        height: '10px', background: '#e2e8f0', borderRadius: '9999px', overflow: 'hidden',
      }}>
        <div style={{
          height: '100%', borderRadius: '9999px', background: color,
          width: width + '%', transition: 'width 0.8s cubic-bezier(0.4,0,0.2,1)',
          position: 'relative',
        }}>
          {animated && (
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
              backgroundSize: '200% 100%',
              animation: 'shimmer 1.5s infinite',
            }} />
          )}
        </div>
      </div>
      <style>{'@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}'}</style>
    </div>
  )
}

Component info

CategoryLoaders

Frameworkreact

TierFREE

Copies0

About

Animated progress bar with percentage display and gradient fill

More from Loaders

'use client'
import { useState, useEffect } from 'react'

export default function LoaderCollection() {
  const [progress, setProgress] = useState(0)
  const [matrix, setMatrix] = useState<string[]>([])

  useEffect(() => {
    const t = setInterval((

LoaderCollection

Loaders

'use client';
import { useEffect, useRef } from 'react';

export default function WaveLoader({ bars = 8, color = "#C9A84C", label = "Processing..." }) {
  const refs = useRef([]);

  useEffect(() => {
    const animations = refs.current.map((el, i) =

WaveLoader

Loaders

'use client'
function Skeleton({ width = '100%', height = '16px', radius = '6px' }) {
  return (
    <div style={{
      width, height, borderRadius: radius,
      background: 'linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%)',
      bac

SkeletonLoader

Loaders

'use client'
export default function SpinnerLoader({ type = 'ring', size = 48, color = '#6d28d9' }) {
  const s = size
  const style = {
    ring: {
      width: s, height: s, borderRadius: '50%',
      border: s/8 + 'px solid #e2e8f0',
      borderT

SpinnerLoader

Loaders