Minecraft boss-bar textures with controlled progress semantics.
Preview
Example source could not be loaded: progress-example. Reload this page to retry.Usage
value defaults to 0; absent or invalid max uses 100. The default color is pink and overlay is progress. The example starts at 50 and completes through a controlled value. Invalid values draw an empty bar; no indeterminate animation is promised.
Composition
Colors are pink, blue, red, green, yellow, purple and white; overlays are progress, notched_6, notched_10, notched_12 and notched_20. ProgressTrack, ProgressIndicator, ProgressLabel and ProgressValue expose further Base UI composition. Use the playground for colors, segments and slider-controlled values.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
import * as React from "react";
import { minecraftProgressAssets } from "./minecraft-progress-assets";
import { MinecraftProgressPaint } from "./minecraft-progress-paint";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import "./minecraft-progress.css";
Interactive playground
For the inherited interaction contract, see Base UI Progress. The restrictions above describe the installed Grasscn implementation.