Next.js with Shadcn UI Progress Bar Example

This content originally appeared on DEV Community and was authored by Aaronn

In this tutorial, we will learn how to use a progress bar in Next.js with Shadcn UI.

Before using the progress bar in Next.js 13 with Shadcn UI, you need to install it by running npx shadcn-ui@latest add progress.

npx shadcn-ui@latest add progress
# or
npx shadcn-ui@latest add

Create a progress bar in Next.js 13 using the Shadcn UI Progresscomponent.

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <div className="space-y-2">
      <Progress value={10} />
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  )
}

2.Implementing a progress bar in Next.js 13 with Shadcn UI using useEffect, useState, and setTimeout.

"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

3.NextJS with shadcn ui progress bar with percentage.

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-xl font-semibold mb-2 text-center">Progress Bars</h2>
        <div className="space-y-2">
          {/* 10% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">10%</span>
            <div className="w-5/6">
              <Progress value={10} />
            </div>
          </div>

          {/* 25% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">25%</span>
            <div className="w-5/6">
              <Progress value={25} />
            </div>
          </div>

          {/* 50% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">50%</span>
            <div className="w-5/6">
              <Progress value={50} />
            </div>
          </div>

          {/* 75% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">75%</span>
            <div className="w-5/6">
              <Progress value={75} />
            </div>
          </div>

          {/* 100% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">100%</span>
            <div className="w-5/6">
              <Progress value={100} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

4.NextJS with shadcn ui progress bar with animation.

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-xl font-semibold mb-2 text-center">Progress Bars</h2>
        <div className="space-y-2">
          {/* 10% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">10%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={10} />
            </div>
          </div>

          {/* 25% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">25%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={25} />
            </div>
          </div>

          {/* 50% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">50%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={50} />
            </div>
          </div>

        </div>
      </div>
    </div>
  )
}

This content originally appeared on DEV Community and was authored by Aaronn

Print Share Comment Cite Upload Translate Updates

APA

Aaronn | Sciencx (2024-07-08T15:54:54+00:00) Next.js with Shadcn UI Progress Bar Example. Retrieved from https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/

MLA

" » Next.js with Shadcn UI Progress Bar Example." Aaronn | Sciencx - Monday July 8, 2024, https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/

HARVARD

Aaronn | Sciencx Monday July 8, 2024 » Next.js with Shadcn UI Progress Bar Example., viewed ,<https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/>

VANCOUVER

Aaronn | Sciencx - » Next.js with Shadcn UI Progress Bar Example. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/

CHICAGO

" » Next.js with Shadcn UI Progress Bar Example." Aaronn | Sciencx - Accessed . https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/

IEEE

" » Next.js with Shadcn UI Progress Bar Example." Aaronn | Sciencx [Online]. Available: https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/. [Accessed: ]

rf:citation

» Next.js with Shadcn UI Progress Bar Example | Aaronn | Sciencx | https://www.scien.cx/2024/07/08/next-js-with-shadcn-ui-progress-bar-example/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts