Prime Community Forum

I need a data loader in my application

I try the following
<p-dialog [(visible)]="ProgressSpinnerDlg" styleClass="ui-dialog-transparent" [closable]="false"
[showHeader]="false" [resizable]="false" [modal]="true">
<p-progressSpinner></p-progressSpinner>
</p-dialog>

.ui-dialog-transparent .ui-widget-content
{
background-color:transparent;
border-width: 0px 0px 0px 0px;
border-color:transparent;
}


But unfortunately transparent is not working (red as example works fine, but I've also still a border with an other colour)
Any idea to make it working or an other solution to create a data loader?

Hi,
Firstly, could you try 'contentStyle' for changing the dialog content section?
Also, you can override in styles.scss or src/assets/sass/overrides/_theme_styles.scss file, like the below code;

Many thanks for the response
I found an other solution in the internet


<div class="loading-indicator" *ngIf="ProgressSpinnerDlg">
<p-progressSpinner></p-progressSpinner>
</div>

.loading-indicator {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* Transparent Overlay */
.loading-indicator:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.53);
}

This works very well for me
Regards Rolf

Glad to hear that