diff --git a/packages/core/src/components/ProgressBars/.DS_Store b/packages/core/src/components/ProgressBars/.DS_Store
new file mode 100644
index 0000000000..5008ddfcf5
Binary files /dev/null and b/packages/core/src/components/ProgressBars/.DS_Store differ
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
new file mode 100644
index 0000000000..922bb63b2f
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { GaugeCard } from './GaugeCard';
+import { Grid } from '@material-ui/core';
+
+const linkInfo = { title: 'Go to XYZ Location', link: '#' };
+
+export default {
+  title: 'Progress Card',
+  component: GaugeCard,
+};
+
+export const Default = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.57} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.89} />
+    </Grid>
+  </Grid>
+);
+
+export const Subhead = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" subheader="With a subheader" progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.57}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.89}
+      />
+    </Grid>
+  </Grid>
+);
+
+export const LinkInFooter = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.3} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.57} />
+    </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
+    </Grid>
+  </Grid>
+);
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.test.jsx b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
new file mode 100644
index 0000000000..27ef0bb188
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInTestApp } from '@backstage/test-utils';
+
+import { GaugeCard } from './GaugeCard';
+
+const minProps = { title: 'Tingle upgrade', progress: 0.12 };
+
+describe('<GaugeCard />', () => {
+  it('renders without exploding', () => {
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(getByText(/Tingle.*/)).toBeInTheDocument();
+  });
+
+  it('renders progress and title', () => {
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(getByText(/Tingle.*/)).toBeInTheDocument();
+    expect(getByText(/12%.*/)).toBeInTheDocument();
+  });
+
+  it('does not render deepLink', () => {
+    const { queryByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
+    expect(queryByText('View more')).not.toBeInTheDocument();
+  });
+
+  it('handles invalid numbers', () => {
+    const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
+    expect(getByText(/N\/A.*/)).toBeInTheDocument();
+  });
+});
diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
new file mode 100644
index 0000000000..778abdf12c
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInTestApp } from '@backstage/test-utils';
+import { GaugeProgress, getProgressColor } from './GaugeProgress';
+
+describe('<GaugeProgress />', () => {
+  it('renders without exploding', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} />),
+    );
+    getByText('10%');
+  });
+  it('handles fractional prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={0.1} fractional />),
+    );
+    getByText('10%');
+  });
+
+  it('handles max prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={1} max={10} fractional={false} />),
+    );
+    getByText('1%');
+  });
+
+  it('handles unit prop', () => {
+    const { getByText } = render(
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} unit="m" />),
+    );
+    getByText('10m');
+  });
+
+  const ok = '#111';
+  const warning = '#222';
+  const error = '#333';
+  const palette = { status: { ok, warning, error } };
+
+  it('colors the progress correctly', () => {
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10)).toBe(error);
+    expect(getProgressColor(palette, 50)).toBe(warning);
+    expect(getProgressColor(palette, 90)).toBe(ok);
+  });
+
+  it('colors the inverse progress correctly', () => {
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10, true)).toBe(ok);
+    expect(getProgressColor(palette, 50, true)).toBe(warning);
+    expect(getProgressColor(palette, 90, true)).toBe(error);
+  });
+});
diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.tsx b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
new file mode 100644
index 0000000000..14776ed431
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles, useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+import { Circle } from 'rc-progress';
+import React, { FC } from 'react';
+
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  root: {
+    position: 'relative',
+    lineHeight: 0,
+  },
+  overlay: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -60%)',
+    fontSize: 45,
+    fontWeight: 'bold',
+    color: theme.palette.textContrast,
+  },
+  circle: {
+    width: '80%',
+    transform: 'translate(10%, 0)',
+  },
+  colorUnknown: {},
+}));
+
+type Props = {
+  value: number;
+  fractional?: boolean;
+  inverse?: boolean;
+  unit?: string;
+  max?: number;
+};
+
+const defaultProps = {
+  fractional: true,
+  inverse: false,
+  unit: '%',
+  max: 100,
+};
+
+export function getProgressColor(
+  palette: BackstageTheme['palette'],
+  value: number,
+  inverse?: boolean,
+  max?: number,
+) {
+  if (isNaN(value)) {
+    return '#ddd';
+  }
+
+  const actualMax = max ? max : defaultProps.max;
+  const actualValue = inverse ? actualMax - value : value;
+
+  if (actualValue < actualMax / 3) {
+    return palette.status.error;
+  } else if (actualValue < actualMax * (2 / 3)) {
+    return palette.status.warning;
+  }
+
+  return palette.status.ok;
+}
+
+export const GaugeProgress: FC<Props> = props => {
+  const classes = useStyles(props);
+  const theme = useTheme<BackstageTheme>();
+  const { value, fractional, inverse, unit, max } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const asPercentage = fractional ? Math.round(value * max) : value;
+  const asActual = max !== 100 ? Math.round(value) : asPercentage;
+
+  return (
+    <div className={classes.root}>
+      <Circle
+        strokeLinecap="butt"
+        percent={asPercentage}
+        strokeWidth={12}
+        trailWidth={12}
+        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
+        className={classes.circle}
+      />
+      <div className={classes.overlay}>
+        {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
new file mode 100644
index 0000000000..c4492986b6
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { LinearGauge } from './LinearGauge';
+
+const containerStyle = { width: 300 };
+
+export default {
+  title: 'LinearGauge',
+  component: LinearGauge,
+};
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.8} />
+  </div>
+);
+
+export const MediumProgress = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.5} />
+  </div>
+);
+
+export const LowProgress = () => (
+  <div style={containerStyle}>
+    <LinearGauge value={0.2} />
+  </div>
+);