diff --git a/src/components/Authenicator/TimerProgress.tsx b/src/components/Authenicator/TimerProgress.tsx
new file mode 100644
index 000000000..c9234f4ac
--- /dev/null
+++ b/src/components/Authenicator/TimerProgress.tsx
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+
+const TimerProgress = ({ period }) => {
+    const [progress, setProgress] = useState(0);
+    const [ticker, setTicker] = useState(null);
+    const microSecondsInPeriod = period * 1000000;
+
+    const startTicker = () => {
+        const ticker = setInterval(() => {
+            updateTimeRemaining();
+        }, 10);
+        setTicker(ticker);
+    };
+
+    const updateTimeRemaining = () => {
+        const timeRemaining =
+            microSecondsInPeriod -
+            ((new Date().getTime() * 1000) % microSecondsInPeriod);
+        setProgress(timeRemaining / microSecondsInPeriod);
+    };
+
+    useEffect(() => {
+        startTicker();
+        return () => clearInterval(ticker);
+    }, []);
+
+    const color = progress > 0.4 ? 'green' : 'orange';
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '3px',
+                backgroundColor: 'transparent',
+            }}>
+            <div
+                style={{
+                    width: `${progress * 100}%`,
+                    height: '100%',
+                    backgroundColor: color,
+                }}></div>
+        </div>
+    );
+};
+
+export default TimerProgress;