tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #6134 from abpframework/dev-loading-animation 

Loading animation for Blazor basic theme
pull/6153/head
Halil İbrahim Kalkan 6 years ago
committed by GitHub
parent
f015202027 82fe6b7a78
commit
48f2f553bf
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html
  2. 49
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css

37
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html
View File

@ -8,27 +8,32 @@
<base href="/" />
<!--ABP:Styles-->
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css" rel="stylesheet" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/libs/abp/css/theme.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css" rel="stylesheet" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/libs/abp/css/theme.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
</head>
<body class="abp-application-layout bg-light">
<div id="ApplicationContainer">Loading...</div>
<div id="ApplicationContainer">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!--ABP:Scripts-->
<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly/libs/abp/js/abp.js"></script>
<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<!--/ABP:Scripts-->
<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly/libs/abp/js/abp.js"></script>
<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<!--/ABP:Scripts-->
</body>
</html>

49
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.css
View File

@ -1 +1,48 @@

.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);
}
}

Write Preview
Loading…
Cancel
Save