diff --git a/resource/interface/client/progress.lua b/resource/interface/client/progress.lua
index bd9fef6..9d43fee 100644
--- a/resource/interface/client/progress.lua
+++ b/resource/interface/client/progress.lua
@@ -128,7 +128,8 @@ function lib.progressCircle(data)
action = 'circleProgress',
data = {
duration = data.duration,
- position = data.position
+ position = data.position,
+ label = data.label
}
})
diff --git a/web/src/features/progress/CircleProgressbar.tsx b/web/src/features/progress/CircleProgressbar.tsx
index f7bcf81..cf1fd9a 100644
--- a/web/src/features/progress/CircleProgressbar.tsx
+++ b/web/src/features/progress/CircleProgressbar.tsx
@@ -3,12 +3,14 @@ import {
CircularProgress,
CircularProgressLabel,
Flex,
+ Text,
} from "@chakra-ui/react";
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui";
interface Props {
+ label?: string;
duration: number;
position?: "middle" | "bottom";
percent?: boolean;
@@ -19,6 +21,7 @@ debugData([
action: "circleProgress",
data: {
duration: 8000,
+ label: "Using Armour",
},
},
]);
@@ -28,6 +31,7 @@ const CircleProgressbar: React.FC = () => {
const [progressDuration, setProgressDuration] = React.useState(0);
const [position, setPosition] = React.useState<"middle" | "bottom">("middle");
const [value, setValue] = React.useState(0);
+ const [label, setLabel] = React.useState("");
const [cancelled, setCancelled] = React.useState(false);
const progressComplete = () => {
@@ -50,6 +54,7 @@ const CircleProgressbar: React.FC = () => {
setCancelled(false);
setVisible(true);
setValue(0);
+ setLabel(data.label || "");
setProgressDuration(data.duration);
setPosition(data.position || "middle");
const onePercent = data.duration * 0.01;
@@ -72,35 +77,48 @@ const CircleProgressbar: React.FC = () => {
alignItems="center"
>
{visible && (
-
-
- {value}%
-
-
+
+
+ {value}%
+
+
+
+ {label}
+
+
)}
);