Material-ui: Addition of the feature of label/text in Linear Progress Bar(Determinate)

[Himank17Gupta]

Summary 💡

It'll be a really helpful add on to be able to display some Text over the Determinate Progress Bar like the percentage value of progress or just any text values as label (as is provided in BootStrap or other Material Designed libraries..), the closest method I could find out was 'title' which displays text only on hover over bar.
Also if this feature exists, I couldn't find it on documentations, please take a look,

Examples 🌈

Motivation 🔦

I am apparently building a Polling application in ReactJS, which requires me to display poll options in a deterministic progress bar(decided by the number of votes on that option), I wanted to display the Option string on the Bar indeed(somewhat like what Twitter does) instead of putting a heading or label above it..also this method is available in Libraries like BootStrap by the name of 'label', I think it'll be a nice add on for such widely used open sourced library.

[oliviertassinari]

@Himank17Gupta Do you mean something like this?

[joshwooding]

I was thinking they meant overlapping text instead.

[oliviertassinari]

Ohh, like this:

[joshwooding]

@oliviertassinari Exactly

[Himank17Gupta]

Yes, overlapping of text is something which will look rich and save us a label or heading component space.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[svict4]

Got a quick hack using Grid for those who need this in the interim:
https://codesandbox.io/s/mui-label-in-progressbar-byec9

[goxr3plus]

Is it implemented bross i need it :)

[agus08]

const useStyles = makeStyles({
  rootProgress: {
    backgroundColor: "#F2F2F2",
    height: "20px",
    borderRadius: "10px"
  }
});

    const innerStyle = makeStyles({
      label: {
        position: "absolute",
        width: "100%",
        height: "100%",
        zIndex: 1,
        maxHeight: "20px", // borderlinearprogress root.height
        textAlign: "center",
        display: "flex",
        alignItems: "center",
        "& span": {
          width: `${value}%`,
          color: "white"
        }
      },
      bar: {
        backgroundColor: color
      }
    });


function BorderLinearProgress(props) {
    const { color, value } = props;

    const classes = useStyles();
    const innerClass = innerStyle();

  return (
      <div>
        <div className={innerClass.label}>
          <span>
            <Typography variant="caption">{`${value}%`}</Typography>
          </span>
        </div>
        <LinearProgress
          classes={{
            root: classes.rootProgress,
            bar: innerClass.bar
          }}
          {...props}
        />
      </div>
    );
  }

try this

[oliviertassinari]

I think that the simplest is to display the progress at the end or at the center but nothing inside:

[pedrinho32]

I think that the simplest is to display the progress at the end or at the center but nothing inside:

Hi Olivier, how do you manage to put the label inside the circle progress?

[oliviertassinari]

Here is a possible implementation:

https://codesandbox.io/s/material-demo-vvtol?file=/demo.tsx:0-1848

import React from "react";
import {
  CircularProgress,
  LinearProgress,
  Typography,
  ThemeProvider,
  createMuiTheme,
  Box
} from "@material-ui/core";

const grey = "#f5f5f5";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#1a90ff"
    }
  },
  overrides: {
    MuiLinearProgress: {
      root: {
        borderRadius: 4,
        height: 7
      },
      bar1Determinate: {
        borderRadius: 4
      },
      colorPrimary: {
        backgroundColor: grey
      }
    },
    MuiCircularProgress: {
      circle: {
        strokeLinecap: "round",
        strokeWidth: 2.8
      }
    }
  }
});

function NumberLinearProgress(props) {
  return (
    <Box display="flex" alignItems="center">
      <Box width="100%" mr={1}>
        <LinearProgress variant="determinate" value={props.value} />
      </Box>
      <Typography variant="body2" color="textSecondary">{`${
        props.value
      }%`}</Typography>
    </Box>
  );
}

function NumberCircularProgress(props) {
  return (
    <Box position="relative" display="inline-block">
      <Box top={0} left={0} bottom={0} right={0} position="absolute">
        <CircularProgress
          style={{ color: grey }}
          size={110}
          variant="static"
          value={100}
        />
      </Box>
      <CircularProgress size={110} variant="static" value={props.value} />
      <Box
        top={0}
        left={0}
        bottom={0}
        right={0}
        position="absolute"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Typography variant="h5" component="div" color="textSecondary">{`${
          props.value
        }%`}</Typography>
      </Box>
    </Box>
  );
}

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <NumberLinearProgress value={30} />
      <br />
      <NumberCircularProgress value={75} />
    </ThemeProvider>
  );
}

[oliviertassinari]

I think that the use case is common enough so that we, at least, add two new demos in the documentation with https://github.com/mui-org/material-ui/issues/18322#issuecomment-633114100. Maybe something in this structure?

diff --git a/docs/src/pages/components/progress/progress.md b/docs/src/pages/components/progress/progress.md
index e79581a9c..75e8017ce 100644
--- a/docs/src/pages/components/progress/progress.md
+++ b/docs/src/pages/components/progress/progress.md
@@ -40,6 +40,10 @@ When displaying progress for a sequence of processes, indicate overall progress

 {{"demo": "pages/components/progress/CircularStatic.js"}}

+### Circular with label
+
+// new demo
+
 ## Linear

 [Linear progress](https://material.io/design/components/progress-indicators.html#linear-progress-indicators) indicators.
@@ -52,6 +56,10 @@ When displaying progress for a sequence of processes, indicate overall progress

 {{"demo": "pages/components/progress/LinearDeterminate.js"}}

+### Linear with label
+
+// new demo
+
 ### Linear Buffer

 {{"demo": "pages/components/progress/LinearBuffer.js"}}

[cjoecker]

@oliviertassinari I can implement this. Should I just add the example to the docs or try also to enhance the component?

[oliviertassinari]

@cjoecker I'm not sure. The linear progress with label seems too simple to ever require a higher level abstraction. For the circular prograss with label, it's a different topic. It requires more code to put it together. I think that we could add the demos, close the issue, and see how that goes.

[Manikanta-20]

@oliviertassinari onhover will work on progress bar?

[goxr3plus]

Is this done? How can we use +:)

[oliviertassinari]

@goxr3plus https://material-ui.com/components/progress/#circular-with-label

[goxr3plus]

@oliviertassinari Thank you , you are amazing :)