diff --git a/package.json b/package.json
index f35dfee..fb1b30c 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "fetch-progress": "github:UniversityRadioYork/fetch-progress",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",
diff --git a/src/App.css b/src/App.css
index 4ba0f17..b806b28 100644
--- a/src/App.css
+++ b/src/App.css
@@ -239,11 +239,7 @@ button{
   height: 6vh !important;
 }
 .waveform .loading {
-  width: 100%;
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: 200;
-  opacity: 0.5;
+  background: #CCCCFF;
 }
 
 .bypass-click {
@@ -266,4 +262,4 @@ button{
 
 .ReactModal__Overlay {
   z-index: 10000;
-}
\ No newline at end of file
+}
diff --git a/src/mixer/state.ts b/src/mixer/state.ts
index 982ae2e..066a3e5 100644
--- a/src/mixer/state.ts
+++ b/src/mixer/state.ts
@@ -4,6 +4,7 @@ import {
 	Dispatch,
 	Middleware
 } from "@reduxjs/toolkit";
+import fetchProgress, { FetchProgressData } from "fetch-progress";
 import Between from "between.js";
 import { PlanItem } from "../showplanner/state";
 import * as BroadcastState from "../broadcast/state";
@@ -45,7 +46,7 @@ export type MicErrorEnum = "NO_PERMISSION" | "NOT_SECURE_CONTEXT" | "UNKNOWN";
 
 interface PlayerState {
 	loadedItem: PlanItem | Track | AuxItem | null;
-	loading: boolean;
+	loading: number;
 	loadError: boolean;
 	state: PlayerStateEnum;
 	volume: number;
@@ -81,7 +82,7 @@ const mixerState = createSlice({
 		players: [
 			{
 				loadedItem: null,
-				loading: false,
+				loading: -1,
 				state: "stopped",
 				volume: 1,
 				gain: 1,
@@ -97,7 +98,7 @@ const mixerState = createSlice({
 			},
 			{
 				loadedItem: null,
-				loading: false,
+				loading: -1,
 				state: "stopped",
 				volume: 1,
 				gain: 1,
@@ -113,7 +114,7 @@ const mixerState = createSlice({
 			},
 			{
 				loadedItem: null,
-				loading: false,
+				loading: -1,
 				state: "stopped",
 				volume: 1,
 				gain: 1,
@@ -148,17 +149,20 @@ const mixerState = createSlice({
 		) {
 			state.players[action.payload.player].loadedItem =
 				action.payload.item;
-			state.players[action.payload.player].loading = true;
+			state.players[action.payload.player].loading = 0;
 			state.players[action.payload.player].timeCurrent = 0;
 			state.players[action.payload.player].timeLength = 0;
 			state.players[action.payload.player].tracklistItemID = -1;
 			state.players[action.payload.player].loadError = false;
 		},
+		itemLoadPercentage(state, action: PayloadAction<{ player: number, percent: number }>) {
+			state.players[action.payload.player].loading = action.payload.percent;
+		},
 		itemLoadComplete(state, action: PayloadAction<{ player: number }>) {
-			state.players[action.payload.player].loading = false;
+			state.players[action.payload.player].loading = -1;
 		},
 		itemLoadError(state, action: PayloadAction<{ player: number }>) {
-			state.players[action.payload.player].loading = false;
+			state.players[action.payload.player].loading = -1;
 			state.players[action.payload.player].loadError = true;
 		},
 		setPlayerState(
@@ -432,7 +436,18 @@ export const load = (
 		const result = await fetch(url, {
 			credentials: "include",
 			signal
-		});
+		}).then(
+				fetchProgress({
+						// implement onProgress method
+						onProgress(progress: FetchProgressData) {
+							const percent = progress.transferred / progress.total;
+							if (percent !== 1) {
+								console.log({ progress });
+								dispatch(mixerState.actions.itemLoadPercentage({ player, percent}));
+							}
+						},
+				})
+		);
 		const rawData = await result.arrayBuffer();
 		const blob = new Blob([rawData]);
 		const objectUrl = URL.createObjectURL(blob);
@@ -474,7 +489,7 @@ export const play = (player: number): AppThunk => async (dispatch, getState) =>
 		await audioContext.resume();
 	}
 	var state = getState().mixer.players[player];
-	if (state.loading) {
+	if (state.loading !== -1) {
 		console.log("not ready");
 		return;
 	}
@@ -510,7 +525,7 @@ export const stop = (player: number): AppThunk => (dispatch, getState) => {
 		return;
 	}
 	var state = getState().mixer.players[player];
-	if (state.loading) {
+	if (state.loading !== -1) {
 		console.log("not ready");
 		return;
 	}
diff --git a/src/showplanner/Player.tsx b/src/showplanner/Player.tsx
index 3958d69..e9816fb 100644
--- a/src/showplanner/Player.tsx
+++ b/src/showplanner/Player.tsx
@@ -15,7 +15,7 @@ export function Player({ id }: { id: number }) {
   return (
     <div
       className={
-        playerState.loadedItem !== null && playerState.loading == false
+        playerState.loadedItem !== null && playerState.loading === -1
           ? "player loaded"
           : "player"
       }
@@ -56,9 +56,9 @@ export function Player({ id }: { id: number }) {
         <div className="card-body p-0">
           <span className="card-title">
             <strong>
-              {playerState.loadedItem !== null && !playerState.loading
+              {playerState.loadedItem !== null && playerState.loading === -1
                 ? playerState.loadedItem.title
-                : playerState.loading
+                : playerState.loading !== -1
                 ? `LOADING`
                 : playerState.loadError
                 ? "LOAD FAILED"
@@ -68,7 +68,7 @@ export function Player({ id }: { id: number }) {
               className={
                 "border rounded border-danger text-danger p-1 m-1" +
                 (playerState.loadedItem !== null &&
-                !playerState.loading &&
+                playerState.loading === -1 &&
                 "clean" in playerState.loadedItem &&
                 !playerState.loadedItem.clean
                   ? ""
@@ -80,7 +80,7 @@ export function Player({ id }: { id: number }) {
           </span>
           <br />
           <span className="text-muted">
-            {playerState.loadedItem !== null && !playerState.loading
+            {playerState.loadedItem !== null && playerState.loading === -1
               ? "artist" in playerState.loadedItem &&
                 playerState.loadedItem.artist
               : ""}
@@ -141,7 +141,9 @@ export function Player({ id }: { id: number }) {
                 - in
               </span>
             )}
-          <div className="m-0 graph" id={"waveform-" + id}></div>
+          <div className={"m-0 graph" + ((playerState.loading !== -1) ? " loading" : "")} id={"waveform-" + id} style={{
+            width: (playerState.loading*100) + "%"}}>
+          </div>
         </div>
       </div>