diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html index f4d6235b14..de63af374c 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html @@ -8,27 +8,32 @@ - - - - - - - - - + + + + + + + + + -
Loading...
+
+ +
- - - - - - + + + + + + diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css index 5f282702bb..eb9395b846 100644 --- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css +++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css @@ -1 +1,48 @@ - \ No newline at end of file +.spinner { + width: 40px; + height: 40px; + display: block; + position: fixed; + top: calc( 50% - ( 40px / 2) ); + right: calc( 50% - ( 40px / 2) ); +} + +.double-bounce1, .double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-bounce 2.0s infinite ease-in-out; + animation: sk-bounce 2.0s infinite ease-in-out; +} + +.double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes sk-bounce { + 0%, 100% { + -webkit-transform: scale(0.0) + } + + 50% { + -webkit-transform: scale(1.0) + } +} + +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } + + 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +}