# All files / src/components/ui progress.tsx

100% Statements 35/35
100% Branches 0/0
100% Functions 0/0
100% Lines 35/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    361x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
     import { ComponentProps, forwardRef } from "react"
    import { cn } from "@/lib/utils"

    interface ProgressProps extends ComponentProps<"div"> {
      value?: number
    }

    export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
      ({ className, value = 0, ...props }, ref) => (
        <div
          ref={ref}
          className={cn("mat-mdc-progress-bar", "mdc-linear-progress", className)}
          role="progressbar"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={value}
          {...props}
        >
          <div className="mdc-linear-progress__buffer">
            <div className="mdc-linear-progress__buffer-bar" />
            <div className="mdc-linear-progress__buffer-dots" />
          </div>
          <div
            className="mdc-linear-progress__bar mdc-linear-progress__primary-bar"
            style={{ transform: `scaleX(${value / 100})` }}
          >
            <span className="mdc-linear-progress__bar-inner" />
          </div>
          <div className="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span className="mdc-linear-progress__bar-inner" />
          </div>
        </div>
      )
    )
    Progress.displayName = "Progress"