Merge CEC-394 Car update log (#82)

src/components/Controls/CircularProgress/index.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+
+const CircularProgressWithLabel = (props) => {
+  return (
+    <Box position="relative" display="inline-flex">
+      <CircularProgress
+        variant="determinate"
+        {...props}
+        style={{ color: "green" }}
+      />
+      <Box
+        top={0}
+        left={0}
+        bottom={0}
+        right={0}
+        position="absolute"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="textSecondary"
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+CircularProgressWithLabel.propTypes = {
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number.isRequired,
+};
+
+export default CircularProgressWithLabel;