Blazor의 초기로드 화면 (Loading) 변경
10463 단어 Blazor.NET.NETCoreASP.NET_CoreC#
개요
Blazor에서 시작할 때 로딩 화면을 변경하는 방법에 대한 메모.
데모
소스 코드
배경
Blazor의 기본 템플릿에서 WEB 사이트를 작성하면, 기동시의 로딩 화면은 아래 그림과 같은 [Loading...]라고 표시되는 것만으로 매우 단순한 화면이 되고 있습니다.
조금 맛이 없기 때문에, 지금 바람의 WEB 사이트와 같이 애니메이션으로 로딩 화면을 표시할 수 있도록 하고 싶습니다.
구현 방법
변경 대상 파일
wwwroot 바로 아래의 index.html이 대상 파일이 됩니다.
wwwroot
├ index.html
…(略)
안을 보면 아래와 같이 Loading...이라고 기재된 app 태그가 있습니다.
이 부분을 변경하여 로딩 화면을 세련되게 할 수 있습니다.
index.html<!DOCTYPE html>
<html>
<head>
…(略)
</head>
<body>
<app>Loading...</app>
…(略)
</body>
CSS 추가
해당 위치에 스피너를 삽입합니다.
이번에는 아래와 같은 심플한 CSS로 실현하고 있는 것을 임베드합니다.
htps // p 여지 cts.ぅ케하아 s. 메/cs-ぉ아데 rs/
좋아하는 색의 설정을 해, ViewSource를 누르면 CSS가 출력되므로 취득합니다.
loader.css.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #ff8000;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
화면 중앙에 배치할 레이아웃의 CSS를 추가합니다.
loader.css.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
}
작성한 CSS 참조를 추가하고 app 태그 내에 스피너를 배치하면 완료됩니다.
index.html<!DOCTYPE html>
<html>
<head>
…(略)
<link href="css/loader.css" rel="stylesheet" />
</head>
<body>
<app>
<div class="loading">
<div class="loader">
<div class="dot-loader"></div>
<div class="dot-loader dot-loader--2"></div>
<div class="dot-loader dot-loader--3"></div>
</div>
</div>
</app>
…(略)
</body>
이상으로 완료입니다.
CSS의 스피너 등, 여러가지 리소스가 있으므로, 자신의 취향에 맞게 바꾸어 보세요.
아래 등도 좋을 것 같습니다.
htps : // 기주 b. 코 m / j ぉ g / 〉 s - s 핀 rs
참고
데모
소스 코드
Reference
이 문제에 관하여(Blazor의 초기로드 화면 (Loading) 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nobu17/items/adce29d366c1fc1e86a9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Blazor의 기본 템플릿에서 WEB 사이트를 작성하면, 기동시의 로딩 화면은 아래 그림과 같은 [Loading...]라고 표시되는 것만으로 매우 단순한 화면이 되고 있습니다.
조금 맛이 없기 때문에, 지금 바람의 WEB 사이트와 같이 애니메이션으로 로딩 화면을 표시할 수 있도록 하고 싶습니다.
구현 방법
변경 대상 파일
wwwroot 바로 아래의 index.html이 대상 파일이 됩니다.
wwwroot
├ index.html
…(略)
안을 보면 아래와 같이 Loading...이라고 기재된 app 태그가 있습니다.
이 부분을 변경하여 로딩 화면을 세련되게 할 수 있습니다.
index.html<!DOCTYPE html>
<html>
<head>
…(略)
</head>
<body>
<app>Loading...</app>
…(略)
</body>
CSS 추가
해당 위치에 스피너를 삽입합니다.
이번에는 아래와 같은 심플한 CSS로 실현하고 있는 것을 임베드합니다.
htps // p 여지 cts.ぅ케하아 s. 메/cs-ぉ아데 rs/
좋아하는 색의 설정을 해, ViewSource를 누르면 CSS가 출력되므로 취득합니다.
loader.css.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #ff8000;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
화면 중앙에 배치할 레이아웃의 CSS를 추가합니다.
loader.css.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
}
작성한 CSS 참조를 추가하고 app 태그 내에 스피너를 배치하면 완료됩니다.
index.html<!DOCTYPE html>
<html>
<head>
…(略)
<link href="css/loader.css" rel="stylesheet" />
</head>
<body>
<app>
<div class="loading">
<div class="loader">
<div class="dot-loader"></div>
<div class="dot-loader dot-loader--2"></div>
<div class="dot-loader dot-loader--3"></div>
</div>
</div>
</app>
…(略)
</body>
이상으로 완료입니다.
CSS의 스피너 등, 여러가지 리소스가 있으므로, 자신의 취향에 맞게 바꾸어 보세요.
아래 등도 좋을 것 같습니다.
htps : // 기주 b. 코 m / j ぉ g / 〉 s - s 핀 rs
참고
데모
소스 코드
Reference
이 문제에 관하여(Blazor의 초기로드 화면 (Loading) 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nobu17/items/adce29d366c1fc1e86a9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
wwwroot
├ index.html
…(略)
<!DOCTYPE html>
<html>
<head>
…(略)
</head>
<body>
<app>Loading...</app>
…(略)
</body>
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #ff8000;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
…(略)
<link href="css/loader.css" rel="stylesheet" />
</head>
<body>
<app>
<div class="loading">
<div class="loader">
<div class="dot-loader"></div>
<div class="dot-loader dot-loader--2"></div>
<div class="dot-loader dot-loader--3"></div>
</div>
</div>
</app>
…(略)
</body>
데모
소스 코드
Reference
이 문제에 관하여(Blazor의 초기로드 화면 (Loading) 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nobu17/items/adce29d366c1fc1e86a9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)