You can customize the progress bar’s size, color, and background by overriding the styles in uploader component. Refer to the following example.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, UploaderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section">
<div class="col-lg-9">
<div class="control_wrapper" id="container">
<ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path'></ejs-uploader>
</div>
</div>
</div>
#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;
}