diff --git a/packages/uhk-agent/src/services/device.service.ts b/packages/uhk-agent/src/services/device.service.ts
index ad9f2f647dd..a0930c95649 100644
--- a/packages/uhk-agent/src/services/device.service.ts
+++ b/packages/uhk-agent/src/services/device.service.ts
@@ -362,9 +362,24 @@ export class DeviceService {
         try {
             await this.stopPollUhkDevice();
 
+            const sendProgress = (progress: number) => {
+                event.sender.send(IpcEvents.device.loadConfigurationProgress, progress);
+            };
+
+            sendProgress(0);
             await this.operations.waitUntilKeyboardBusy();
-            const result = await this.operations.loadConfigurations();
+
+            const preTransferPercent = 3;
+            const transferPercentRange = 0.82;
+            sendProgress(preTransferPercent);
+
+            const result = await this.operations.loadConfigurations((percent) => {
+                sendProgress(preTransferPercent + Math.round(percent * transferPercentRange));
+            });
+
+            sendProgress(88);
             const modules: HardwareModules = await this.getHardwareModules(false);
+            sendProgress(95);
 
             const hardwareConfig = getHardwareConfigFromDeviceResponse(result.hardwareConfiguration);
             const uniqueId = hardwareConfig.uniqueId;
@@ -385,6 +400,7 @@ export class DeviceService {
                         info: BackupUserConfigurationInfo.Unknown
                     }
             };
+            sendProgress(100);
         } catch (error) {
             response = {
                 success: false,
@@ -1298,18 +1314,32 @@ export class DeviceService {
 
         try {
             await this.stopPollUhkDevice();
+
+            const sendProgress = (progress: number) => {
+                event.sender.send(IpcEvents.device.saveUserConfigurationProgress, progress);
+            };
+
+            sendProgress(0);
             await backupUserConfiguration(data);
+            const preTransferPercent = 1;
+            const transferPercentRange = 0.94;
+            sendProgress(preTransferPercent);
 
             this.logService.config('[DeviceService] User configuration will be saved', data.configuration);
             const buffer = mapObjectToUserConfigBinaryBuffer(data.configuration);
-            await this.operations.saveUserConfiguration(buffer);
+            await this.operations.saveUserConfiguration(buffer, (percent) => {
+                sendProgress(preTransferPercent + Math.round(percent * transferPercentRange));
+            });
+
             this._checkStatusBuffer = true;
 
             if (data.saveInHistory) {
+                sendProgress(97);
                 await saveUserConfigHistoryAsync(buffer, data.deviceId, data.uniqueId);
                 await this.loadUserConfigFromHistory(event);
             }
 
+            sendProgress(100);
             response.success = true;
         } catch (error) {
             this.logService.error('[DeviceService] Transferring error', error);
diff --git a/packages/uhk-common/src/util/ipcEvents.ts b/packages/uhk-common/src/util/ipcEvents.ts
index 61916764982..6144399d7e8 100644
--- a/packages/uhk-common/src/util/ipcEvents.ts
+++ b/packages/uhk-common/src/util/ipcEvents.ts
@@ -45,8 +45,10 @@ export class Device {
     public static readonly setPrivilegeOnLinuxReply = 'set-privilege-on-linux-reply';
     public static readonly deviceConnectionStateChanged = 'device-connection-state-changed';
     public static readonly saveUserConfiguration = 'device-save-user-configuration';
+    public static readonly saveUserConfigurationProgress = 'device-save-user-configuration-progress';
     public static readonly saveUserConfigurationReply = 'device-save-user-configuration-reply';
     public static readonly loadConfigurations = 'device-load-configuration';
+    public static readonly loadConfigurationProgress = 'device-load-configuration-progress';
     public static readonly loadConfigurationReply = 'device-load-configuration-reply';
     public static readonly updateFirmware = 'device-update-firmware';
     public static readonly updateFirmwareJson = 'device-update-firmware-json';
diff --git a/packages/uhk-usb/src/uhk-operations.ts b/packages/uhk-usb/src/uhk-operations.ts
index ff41a8f074b..3ae27fd0a80 100644
--- a/packages/uhk-usb/src/uhk-operations.ts
+++ b/packages/uhk-usb/src/uhk-operations.ts
@@ -308,11 +308,35 @@ export class UhkOperations {
      * Return with the actual UserConfiguration from UHK Device
      * @returns {Promise<Buffer>}
      */
-    public async loadConfigurations(): Promise<LoadConfigurationsResult> {
+    public async loadConfigurations(onProgress?: (percent: number) => void): Promise<LoadConfigurationsResult> {
         try {
             await this.waitUntilKeyboardBusy();
-            const userConfiguration = await this.loadConfiguration(ConfigBufferId.validatedUserConfig);
-            const hardwareConfiguration = await this.loadConfiguration(ConfigBufferId.hardwareConfig);
+            onProgress?.(0);
+
+            const configSizes = await this.getConfigSizesFromKeyboard();
+            let userConfigSize = configSizes.userConfig;
+            const hardwareConfigSize = configSizes.hardwareConfig;
+
+            const reportTransferProgress = (userOffset: number, hardwareOffset: number) => {
+                const totalBytes = Math.max(userConfigSize + hardwareConfigSize, 1);
+                const transferredBytes = userOffset + hardwareOffset;
+
+                onProgress?.(Math.round(transferredBytes / totalBytes * 100));
+            };
+
+            const userConfiguration = await this.loadConfiguration(
+                ConfigBufferId.validatedUserConfig,
+                (offset, configSize) => {
+                    userConfigSize = configSize;
+                    reportTransferProgress(offset, 0);
+                }
+            );
+            const hardwareConfiguration = await this.loadConfiguration(
+                ConfigBufferId.hardwareConfig,
+                (offset) => {
+                    reportTransferProgress(userConfigSize, offset);
+                }
+            );
 
             return {
                 userConfiguration: JSON.stringify(convertBufferToIntArray(userConfiguration)),
@@ -327,7 +351,10 @@ export class UhkOperations {
      * Return with the actual user / hardware fonfiguration from UHK Device
      * @returns {Promise<Buffer>}
      */
-    public async loadConfiguration(configBufferId: ConfigBufferId): Promise<Buffer> {
+    public async loadConfiguration(
+        configBufferId: ConfigBufferId,
+        onProgress?: (offset: number, configSize: number) => void
+    ): Promise<Buffer> {
         const configBufferIdToName = ['HardwareConfig', 'StagingUserConfig', 'ValidatedUserConfig'];
         const configName = configBufferIdToName[configBufferId];
 
@@ -360,6 +387,8 @@ export class UhkOperations {
                         configSize = originalConfigSize;
                     }
                 }
+
+                onProgress?.(offset, configSize);
             }
 
             return configBuffer;
@@ -393,8 +422,13 @@ export class UhkOperations {
         };
     }
 
-    public async saveUserConfiguration(buffer: Buffer): Promise<void> {
+    public async saveUserConfiguration(buffer: Buffer, onProgress?: (percent: number) => void): Promise<void> {
+        const reportProgress = (percent: number) => {
+            onProgress?.(percent);
+        };
+
         try {
+            reportProgress(0);
             this.logService.usbOps('[DeviceOperation] USB[T]: Write user configuration to keyboard');
             let shouldRecalculateLength = false;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -423,11 +457,23 @@ export class UhkOperations {
 
             const resultBuffer = new UhkBuffer(UHK_EEPROM_SIZE)
             userConfiguration.toBinary(resultBuffer)
-            await this.sendConfigToKeyboard(resultBuffer.getBufferContent(), true);
+            const configBuffer = resultBuffer.getBufferContent();
+
+            const preTransferPercent = 2;
+            const transferPercentRange = 0.83;
+
+            reportProgress(preTransferPercent);
+            await this.sendConfigToKeyboard(configBuffer, true, (percent) => {
+                reportProgress(preTransferPercent + Math.round(percent * transferPercentRange));
+            });
+            reportProgress(86);
             await this.applyConfiguration();
+            reportProgress(90);
             this.logService.usbOps('[DeviceOperation] USB[T]: Write user configuration to EEPROM');
             await this.writeConfigToEeprom(ConfigBufferId.validatedUserConfig);
+            reportProgress(94);
             await this.waitUntilKeyboardBusy();
+            reportProgress(96);
         } catch (error) {
             this.logService.error('[DeviceOperation] Transferring error', error);
             throw error;
@@ -916,14 +962,19 @@ export class UhkOperations {
      * @returns {Promise<void>}
      * @private
      */
-    private async sendConfigToKeyboard(buffer: Buffer, isUserConfiguration): Promise<void> {
+    private async sendConfigToKeyboard(
+        buffer: Buffer,
+        isUserConfiguration,
+        onProgress?: (percent: number) => void
+    ): Promise<void> {
         const command = isUserConfiguration
             ? UsbCommand.WriteStagingUserConfig
             : UsbCommand.WriteHardwareConfig;
 
         const fragments = getTransferBuffers(command, buffer);
-        for (const fragment of fragments) {
-            await this.device.write(fragment);
+        for (let i = 0; i < fragments.length; i++) {
+            await this.device.write(fragments[i]);
+            onProgress?.(Math.round((i + 1) / fragments.length * 100));
         }
     }
 
diff --git a/packages/uhk-web/src/app/components/progress-button/progress-button.component.html b/packages/uhk-web/src/app/components/progress-button/progress-button.component.html
index c79c62dd2e5..1662b516b6e 100644
--- a/packages/uhk-web/src/app/components/progress-button/progress-button.component.html
+++ b/packages/uhk-web/src/app/components/progress-button/progress-button.component.html
@@ -1,8 +1,15 @@
-<button class="btn btn-primary"
+<button class="btn btn-primary progress-button"
         (click)="onClicked()"
+        [class.progress-button--active]="state.showProgress"
         [disabled]="state.showProgress">
-    <fa-icon *ngIf="state.showProgress"
-             [icon]="faSpinner"
-             animation="spin"></fa-icon>
-    {{state.text}}
+    <span class="progress-button__fill"
+          role="progressbar"
+          [attr.aria-valuenow]="state.progressPercent"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [style.width.%]="state.showProgress ? state.progressPercent : 0">
+    </span>
+    <span class="progress-button__content">
+        {{state.text}}
+    </span>
 </button>
diff --git a/packages/uhk-web/src/app/components/progress-button/progress-button.component.scss b/packages/uhk-web/src/app/components/progress-button/progress-button.component.scss
index d45efbef779..3d95f0dd4d0 100644
--- a/packages/uhk-web/src/app/components/progress-button/progress-button.component.scss
+++ b/packages/uhk-web/src/app/components/progress-button/progress-button.component.scss
@@ -1,3 +1,23 @@
 button {
     min-width: 150px;
 }
+
+.progress-button {
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-button__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: var(--color-loading-progress-bar-fill);
+    opacity: 0.35;
+    transition: width 200ms ease-out;
+}
+
+.progress-button__content {
+    position: relative;
+    z-index: 1;
+}
diff --git a/packages/uhk-web/src/app/components/progress-button/progress-button.component.ts b/packages/uhk-web/src/app/components/progress-button/progress-button.component.ts
index 2ce34995ec1..403268aa863 100644
--- a/packages/uhk-web/src/app/components/progress-button/progress-button.component.ts
+++ b/packages/uhk-web/src/app/components/progress-button/progress-button.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { Action } from '@ngrx/store';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import { ProgressButtonState, initProgressButtonState } from '../../store/reducers/progress-button-state';
 
@@ -15,8 +14,6 @@ export class ProgressButtonComponent {
     @Input() state: ProgressButtonState = initProgressButtonState;
     @Output() clicked: EventEmitter<Action> = new EventEmitter<Action>();
 
-    faSpinner = faSpinner;
-
     onClicked() {
         this.clicked.emit(this.state.action);
     }
diff --git a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html
index 3fe18cb5694..5de60076630 100644
--- a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html
+++ b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html
@@ -1,12 +1,22 @@
 <div class="uhk-message-wrapper">
-    <uhk-agent-icon *ngIf="showLogo"
-         class="agent-logo"
-         [ngClass]="{'spin-logo': rotateLogo}">
-    </uhk-agent-icon>
-    <div class="messages">
-        <h1> {{ header }} </h1>
-        <h2 *ngIf="!smallText"> {{ subtitle }} </h2>
-        <div *ngIf="smallText"> {{ subtitle }} </div>
-        <p *ngIf="description"> {{ description }} </p>
+        <div class="uhk-message-content">
+        <div class="uhk-message-main">
+            <uhk-agent-icon *ngIf="showLogo"
+                 class="agent-logo"
+                 [ngClass]="{'spin-logo': rotateLogo}">
+            </uhk-agent-icon>
+            <div class="messages">
+                <h1> {{ header }} </h1>
+                <h2 *ngIf="!smallText"> {{ subtitle }} </h2>
+                <div *ngIf="smallText"> {{ subtitle }} </div>
+                <p *ngIf="description"> {{ description }} </p>
+            </div>
+        </div>
+        <div *ngIf="showProgressBar" class="loading-progress-bar-wrapper">
+            <progress class="loading-progress-bar"
+                      [value]="progressPercent"
+                      max="100">
+            </progress>
+        </div>
     </div>
 </div>
diff --git a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss
index b503f68b0d6..ca3a52b2b03 100644
--- a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss
+++ b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss
@@ -5,12 +5,59 @@
     justify-content: center;
 }
 
+.uhk-message-content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.uhk-message-main {
+    display: flex;
+    align-items: center;
+}
+
 .agent-logo {
     margin: 1.25em;
     height: 8em;
     width: 8em;
 }
 
+.loading-progress-bar-wrapper {
+    width: 100%;
+    padding: 0 1.25em;
+}
+
+.loading-progress-bar {
+    display: block;
+    width: 100%;
+    height: 1rem;
+    appearance: none;
+    border: none;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    background-color: var(--color-loading-progress-bar-bg);
+
+    &::-webkit-progress-inner-element {
+        border: none;
+    }
+
+    &::-webkit-progress-bar {
+        background-color: var(--color-loading-progress-bar-bg);
+    }
+
+    &::-webkit-progress-value {
+        background-color: var(--color-loading-progress-bar-fill);
+        border-radius: 0;
+        transition: inline-size 200ms ease-out;
+    }
+
+    &::-moz-progress-bar {
+        background-color: var(--color-loading-progress-bar-fill);
+        border-radius: 0;
+        transition: inline-size 200ms ease-out;
+    }
+}
+
 .message {
     display: flex;
     flex-direction: column;
diff --git a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.ts b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.ts
index 4106699df65..d0d73d24459 100644
--- a/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.ts
+++ b/packages/uhk-web/src/app/components/uhk-message/uhk-message.component.ts
@@ -13,5 +13,7 @@ export class UhkMessageComponent {
     @Input() subtitle: string;
     @Input() rotateLogo = false;
     @Input() showLogo = false;
+    @Input() showProgressBar = false;
+    @Input() progressPercent = 0;
     @Input() smallText = false;
 }
diff --git a/packages/uhk-web/src/app/pages/loading-page/loading-device.page.ts b/packages/uhk-web/src/app/pages/loading-page/loading-device.page.ts
index f114fad7727..b86fda39283 100644
--- a/packages/uhk-web/src/app/pages/loading-page/loading-device.page.ts
+++ b/packages/uhk-web/src/app/pages/loading-page/loading-device.page.ts
@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { AppState, getConfigurationLoadingProgress } from '../../store';
 
 @Component({
     selector: 'loading-device',
@@ -7,11 +11,15 @@ import { Component } from '@angular/core';
         <uhk-message header="Loading keyboard configuration..."
                      subtitle="Hang tight!"
                      [showLogo]="true"
-                     [rotateLogo]="true"></uhk-message>
+                     [rotateLogo]="true"
+                     [showProgressBar]="true"
+                     [progressPercent]="progressPercent$ | async"></uhk-message>
     `,
 })
 export class LoadingDevicePageComponent {
+    progressPercent$: Observable<number>;
 
-    constructor() {
+    constructor(store: Store<AppState>) {
+        this.progressPercent$ = store.select(getConfigurationLoadingProgress);
     }
 }
diff --git a/packages/uhk-web/src/app/services/device-renderer.service.ts b/packages/uhk-web/src/app/services/device-renderer.service.ts
index f205e6d0fff..aff91883474 100644
--- a/packages/uhk-web/src/app/services/device-renderer.service.ts
+++ b/packages/uhk-web/src/app/services/device-renderer.service.ts
@@ -54,6 +54,7 @@ import {
     RecoveryDeviceReplyAction,
     RecoveryModuleReplyAction,
     SaveConfigurationReplyAction,
+    SaveConfigurationProgressChangedAction,
     SetPrivilegeOnLinuxReplyAction,
     StatusBufferChangedAction,
     UpdateFirmwareJsonAction,
@@ -65,6 +66,7 @@ import {
     I2cWatchdogCounterChangedAction,
 } from '../store/actions/advance-settings.action';
 import { LoadConfigFromDeviceReplyAction, LoadUserConfigurationFromFileAction } from '../store/actions/user-config';
+import { ConfigurationLoadingProgressChangedAction } from '../store/actions/app';
 import {
     DeleteUserConfigHistoryReplyAction,
     LoadUserConfigurationHistorySuccessAction,
@@ -264,6 +266,10 @@ export class DeviceRendererService {
             this.dispachStoreAction(new SetPrivilegeOnLinuxReplyAction(response));
         });
 
+        this.ipcRenderer.on(IpcEvents.device.saveUserConfigurationProgress, (event: string, progress: number) => {
+            this.dispachStoreAction(new SaveConfigurationProgressChangedAction(progress));
+        });
+
         this.ipcRenderer.on(IpcEvents.device.saveUserConfigurationReply, (event: string, response: IpcResponse) => {
             this.dispachStoreAction(new SaveConfigurationReplyAction(response));
         });
@@ -272,6 +278,10 @@ export class DeviceRendererService {
             this.dispachStoreAction(new StatusBufferChangedAction(response));
         });
 
+        this.ipcRenderer.on(IpcEvents.device.loadConfigurationProgress, (event: string, progress: number) => {
+            this.dispachStoreAction(new ConfigurationLoadingProgressChangedAction(progress));
+        });
+
         this.ipcRenderer.on(IpcEvents.device.loadConfigurationReply, (event: string, response: string) => {
             this.dispachStoreAction(new LoadConfigFromDeviceReplyAction(JSON.parse(response)));
         });
diff --git a/packages/uhk-web/src/app/store/actions/app.ts b/packages/uhk-web/src/app/store/actions/app.ts
index 63553d9aaba..555cf4eb3dd 100644
--- a/packages/uhk-web/src/app/store/actions/app.ts
+++ b/packages/uhk-web/src/app/store/actions/app.ts
@@ -17,6 +17,7 @@ export enum ActionTypes {
     UndoLastSuccess = '[app] undo last action success',
     DismissUndoNotification = '[app] dismiss notification action',
     LoadHardwareConfigurationSuccess = '[app] load hardware configuration success',
+    ConfigurationLoadingProgressChanged = '[app] configuration loading progress changed',
     LoadApplicationSettings = '[app] Load application settings',
     LoadApplicationSettingsSuccess = '[app] Load application settings success',
     SaveApplicationSettingsSuccess = '[app] Save application settings success',
@@ -103,6 +104,13 @@ export class LoadHardwareConfigurationSuccessAction implements Action {
     }
 }
 
+export class ConfigurationLoadingProgressChangedAction implements Action {
+    type = ActionTypes.ConfigurationLoadingProgressChanged;
+
+    constructor(public payload: number) {
+    }
+}
+
 export class LoadApplicationSettingsAction implements Action {
     type = ActionTypes.LoadApplicationSettings;
 }
@@ -215,6 +223,7 @@ export type Actions
     | UndoLastSuccessAction
     | DismissUndoNotificationAction
     | LoadHardwareConfigurationSuccessAction
+    | ConfigurationLoadingProgressChangedAction
     | LoadApplicationSettingsAction
     | LoadApplicationSettingsSuccessAction
     | SaveApplicationSettingsSuccessAction
diff --git a/packages/uhk-web/src/app/store/actions/device.ts b/packages/uhk-web/src/app/store/actions/device.ts
index df0d8035ec8..f2d2f4f21ca 100644
--- a/packages/uhk-web/src/app/store/actions/device.ts
+++ b/packages/uhk-web/src/app/store/actions/device.ts
@@ -37,6 +37,7 @@ export enum ActionTypes {
     SetPrivilegeOnLinuxReply = '[device] set privilege on linux reply',
     ConnectionStateChanged = '[device] connection state changed',
     SaveConfiguration = '[device] save configuration',
+    SaveConfigurationProgressChanged = '[device] save configuration progress changed',
     SaveConfigurationReply = '[device] save configuration reply',
     SavingConfiguration = '[device] saving configuration', // TODO: Delete looks like not used
     ShowSaveToKeyboardButton = '[device] show save to keyboard button',
@@ -161,6 +162,13 @@ export class SaveConfigurationAction implements Action {
     }
 }
 
+export class SaveConfigurationProgressChangedAction implements Action {
+    type = ActionTypes.SaveConfigurationProgressChanged;
+
+    constructor(public payload: number) {
+    }
+}
+
 export class SaveConfigurationReplyAction implements Action {
     type = ActionTypes.SaveConfigurationReply;
 
@@ -357,6 +365,7 @@ export type Actions
     | ConnectionStateChangedAction
     | ShowSaveToKeyboardButtonAction
     | SaveConfigurationAction
+    | SaveConfigurationProgressChangedAction
     | SaveConfigurationReplyAction
     | SaveToKeyboardSuccessAction
     | SaveToKeyboardSuccessFailed
diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts
index 445b53252c2..3487e9ef605 100644
--- a/packages/uhk-web/src/app/store/index.ts
+++ b/packages/uhk-web/src/app/store/index.ts
@@ -191,6 +191,7 @@ export const getPrevUserConfiguration = createSelector(appState, fromApp.getPrev
 export const runningInElectron = createSelector(appState, fromApp.runningInElectron);
 export const getKeyboardLayout = createSelector(appState, fromApp.getKeyboardLayout);
 export const deviceConfigurationLoaded = createSelector(appState, fromApp.deviceConfigurationLoaded);
+export const getConfigurationLoadingProgress = createSelector(appState, fromApp.getConfigurationLoadingProgress);
 export const getOperatingSystem = createSelector(appState, fromSelectors.getOperatingSystem);
 export const keypressCapturing = createSelector(appState, fromApp.keypressCapturing);
 export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
diff --git a/packages/uhk-web/src/app/store/reducers/app.reducer.ts b/packages/uhk-web/src/app/store/reducers/app.reducer.ts
index 63cc63500c9..2c197e58b24 100644
--- a/packages/uhk-web/src/app/store/reducers/app.reducer.ts
+++ b/packages/uhk-web/src/app/store/reducers/app.reducer.ts
@@ -29,6 +29,7 @@ export interface State {
     prevUserConfig?: UserConfiguration;
     runningInElectron: boolean;
     configLoading: boolean;
+    configurationLoadingProgress: number;
     hardwareConfig?: HardwareConfiguration;
     privilegeWhatWillThisDoClicked: boolean;
     permissionError?: unknown;
@@ -49,6 +50,7 @@ export const initialState: State = {
     navigationCountAfterNotification: 0,
     runningInElectron: runInElectron(),
     configLoading: true,
+    configurationLoadingProgress: 0,
     privilegeWhatWillThisDoClicked: false,
     keypressCapturing: false,
     everAttemptedSavingToKeyboard: false,
@@ -133,7 +135,17 @@ export function reducer(
         case UserConfigActionTypes.LoadUserConfig: {
             return {
                 ...state,
-                configLoading: true
+                configLoading: true,
+                configurationLoadingProgress: 0
+            };
+        }
+
+        case App.ActionTypes.ConfigurationLoadingProgressChanged: {
+            const progress = (action as App.ConfigurationLoadingProgressChangedAction).payload;
+
+            return {
+                ...state,
+                configurationLoadingProgress: progress
             };
         }
 
@@ -152,7 +164,8 @@ export function reducer(
 
             return {
                 ...state,
-                hardwareConfig: null
+                hardwareConfig: null,
+                configurationLoadingProgress: 0
             };
         }
 
@@ -235,6 +248,7 @@ export const getKeyboardLayout = (state: State): KeyboardLayout => {
     return KeyboardLayout.ANSI;
 };
 export const deviceConfigurationLoaded = (state: State) => !state.runningInElectron ? true : !!state.hardwareConfig;
+export const getConfigurationLoadingProgress = (state: State): number => state.configurationLoadingProgress;
 
 export const runningOnNotSupportedWindows = (state: State): boolean => {
     if (!state.osVersion || state.platform !== 'win32') {
diff --git a/packages/uhk-web/src/app/store/reducers/device.ts b/packages/uhk-web/src/app/store/reducers/device.ts
index 817cb075f50..ff41516178a 100644
--- a/packages/uhk-web/src/app/store/reducers/device.ts
+++ b/packages/uhk-web/src/app/store/reducers/device.ts
@@ -226,7 +226,24 @@ export function reducer(state = initialState, action: Action): State {
                 saveToKeyboard: {
                     showButton: true,
                     text: 'Saving',
-                    showProgress: true
+                    showProgress: true,
+                    progressPercent: 0
+                }
+            };
+        }
+
+        case Device.ActionTypes.SaveConfigurationProgressChanged: {
+            if (!state.saveToKeyboard.showProgress) {
+                return state;
+            }
+
+            const progress = (action as Device.SaveConfigurationProgressChangedAction).payload;
+
+            return {
+                ...state,
+                saveToKeyboard: {
+                    ...state.saveToKeyboard,
+                    progressPercent: progress
                 }
             };
         }
@@ -237,7 +254,9 @@ export function reducer(state = initialState, action: Action): State {
                 saveToKeyboard: {
                     showButton: true,
                     text: 'Saved!',
-                    action: null
+                    action: null,
+                    showProgress: true,
+                    progressPercent: 100
                 },
                 restoringUserConfiguration: false
             };
diff --git a/packages/uhk-web/src/app/store/reducers/progress-button-state.ts b/packages/uhk-web/src/app/store/reducers/progress-button-state.ts
index 9fd5d564d4e..23e9d2c0461 100644
--- a/packages/uhk-web/src/app/store/reducers/progress-button-state.ts
+++ b/packages/uhk-web/src/app/store/reducers/progress-button-state.ts
@@ -4,20 +4,24 @@ import * as Device from "../actions/device";
 export interface ProgressButtonState {
     showButton: boolean;
     text: string;
-    showProgress?: boolean;
+    showProgress: boolean;
+    progressPercent: number;
     action?: Action;
 }
 
 export const initProgressButtonState = {
     showButton: false,
     text: null,
-    showProgress: false
+    showProgress: false,
+    progressPercent: 0
 };
 
 export function getSaveToKeyboardButtonState(): ProgressButtonState {
     return {
         showButton: true,
         text: 'Save to keyboard',
+        showProgress: false,
+        progressPercent: 0,
         action: new Device.SaveConfigurationAction(true)
     };
 }
diff --git a/packages/uhk-web/src/styles/themes/_dark.scss b/packages/uhk-web/src/styles/themes/_dark.scss
index eb1a4ea822f..543233eb44f 100644
--- a/packages/uhk-web/src/styles/themes/_dark.scss
+++ b/packages/uhk-web/src/styles/themes/_dark.scss
@@ -118,6 +118,9 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default;
     --color-progress-bar-progress-rgb-colors: #{tint-color($success, 10%)};
     --color-progress-bar-text: #{$color-text};
 
+    --color-loading-progress-bar-bg: #555;
+    --color-loading-progress-bar-fill: #fff;
+
     --color-macro-bg: #333;
     --color-macro-border: #444;
 
diff --git a/packages/uhk-web/src/styles/themes/_light.scss b/packages/uhk-web/src/styles/themes/_light.scss
index cde125b9b1a..287671d09a9 100644
--- a/packages/uhk-web/src/styles/themes/_light.scss
+++ b/packages/uhk-web/src/styles/themes/_light.scss
@@ -91,6 +91,9 @@ $input-focus-border-color: lighten($component-active-bg, 25%) !default;
     --color-progress-bar-progress-rgb-colors: #{tint-color($success, 20%)};
     --color-progress-bar-text: #{$color-text};
 
+    --color-loading-progress-bar-bg: #e0e0e0;
+    --color-loading-progress-bar-fill: #000;
+
     --color-macro-bg: #{$color-bg-light};
     --color-macro-border: #ebebeb;