스피너 (Angular 재질 구성 요소)와 텍스트를 표시하는 데 사용되는 오버레이가 있습니다. 이 오버레이는 페이지 전체에 있으며 아래 요소를 클릭 할 수 없습니다.
스피너는 페이지 중앙에 있으며 "로드 중"텍스트가 스피너와 수직으로 정렬되고 하단의 스피너가 수평으로 중앙에 배치되기를 원합니다.
내 HTML 코드와 CSS 스타일은 다음과 같습니다.
<div id="overlay" [style.display]="this.showOverlay">
<div id="overlay-spinner">
<mat-spinner [diameter]="80" color="accent"></mat-spinner>
</div>
<div id="overlay-text">
<span>Loading ...</span>
</div>
</div>
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1; /* Specify a stack order in case you're using a different
order for other elements */
cursor: default; /* Add a pointer on hover */
}
#overlay-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#overlay-text {
position: absolute;
top: 65%;
left: 50%;
font-size: 40px;
color: white;
transform: translate(-65%,-50%);
-ms-transform: translate(-65%,-50%);
}
태그 내부의 [] 속성은 Angular 코드이기 때문에 신경 쓰지 않아도됩니다. 스피너 속성을 설정하거나 전체 오버레이를 표시하는 데 사용됩니다.
절대 위치, 상위 65 %, 왼쪽 50 %로 시도했지만 스피너와 텍스트가 제대로 정렬되지 않았습니다. 어떻게해야합니까?
가장 좋은 장면은 display : flex가 방향과 정렬로 오버레이에 표시되는 것입니다 (아래 스 니펫 참조). flex 에 대해서는이 매우 포괄적이고 훌륭한 가이드 에서 더 많은 것을 읽을 수 있습니다 . 나는 이것이 당신이 달성하기를 기대했던 것입니다!
추신 : 나는 그것이 보이는지 확인하기 위해 'spinner is here'를 사용했습니다.
ps2 .: '로드 중'끝에 '...'이 표시되어 실제로 스피너 텍스트 바로 아래 중앙에 위치합니다.
#overlay {
position: fixed;
display: flex;
justify-content:center;
align-items:center;
flex-direction:column;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
cursor: default;
}
#overlay-text {
font-size: 40px;
color: white;
}<div id="overlay" [style.display]="this.showOverlay">
<div id="overlay-spinner">
<p>spinner is here</p>
</div>
<div id="overlay-text">
<span>Loading ...</span>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다