How to customize progress bar in Angular Uploader

31 Aug 20262 minutes to read

You can customize the progress bar’s size, color, and background by overriding the default Uploader component styles. The progress bar is styled via the .e-upload-progress and .e-progress-inner-wrap classes, which can be overridden in the component’s stylesheet. Refer to the following example to apply custom styling to the progress indicator.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
         UploaderModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './default.html',
    styleUrls: ['./index.css']
})

export class AppComponent {

    public path: Object = {
        saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
    };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

index.css

#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

.control_wrapper {
  max-width: 500px;
  min-width: 245px;
  margin: auto;
}

#container .e-control .e-upload-files .e-file-container .e-progress-inner-wrap .e-upload-progress {
  background: yellow;
  height: 4px;
}

#container .e-control .e-upload-files .e-file-container .e-progress-inner-wrap {
  height: 4px;
  background-color: lightblue;
}

You can also explore the Angular File Upload feature tour page for its groundbreaking features. Explore our Angular File Upload example to understand how to browse and select the files which you want to upload to the server.