如何在PrimeNG中叠加一个进度旋转器？

Question

我有一个像这样的进度条旋转器：

<p-progressSpinner></p-progressSpinner>

我想将它居中并覆盖在上面。我该怎么做？

谢谢。

- BenMansourNizar

---

什么是“覆盖”？ - Antikhippe

我是说我希望它像primeng对话框一样。(modal=true) - BenMansourNizar

Answer 1

这对我有用： 原始网址 HTML

<div class="progress-spinner" *ngIf="true">
    <p-progressSpinner></p-progressSpinner>
</div>

css

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

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

- Sampath

Answer 2

我正在使用PrimeVue（类似于PrimeNG，我想）并且这是我用来获取带有进度旋转器的全屏覆盖的方法。

在我的HTML中，我有这个...

<BlockUI :blocked="isLoading" :fullScreen="true"></BlockUI>
<ProgressSpinner v-show="isLoading" class="overlay"/>

然后在我的CSS文件中，我有这个样式...

.overlay {
    position:fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 100; /* this seems to work for me but may need to be higher*/
}

在我的TypeScript中，我有一个响应式变量...

const isLoading = ref(false)

然后在各种函数中，我根据需要设置该变量的状态...

isLoading.value = true /* to show overlay + spinner */
isLoading.value = false /* to hide overlay + spinner */

- krick

---

同时使用PrimeVue，非常有帮助的答案！ - Oleg Abrazhaev

Answer 3

我不确定你所说的"overlay"是什么意思，但如果你想在对话框内放置进度旋转器，则

<p-dialog [(visible)]="display" [showHeader]="false" [resizable]="false" [modal]="true" [focusOnShow]="false" >
    <i class="pi pi-times" style="float:right" (click)="onCancel()"></i>
    <div style="width: 900px;height: 500px;padding-top: 20%;">
        <p-progressSpinner></p-progressSpinner>
    </div>
</p-dialog>

- Shanthan Vasalamari