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

Loading animation for Blazor basic theme

pull/6134/head
Mladen Macanovic 6 years ago
parent
b1b1544323
commit
82fe6b7a78
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
Unified 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="/" /> <base href="/" />
<!--ABP:Styles--> <!--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/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/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/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.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/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.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="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/libs/abp/css/theme.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" /> <link href="main.css" rel="stylesheet" />
<!--/ABP:Styles--> <!--/ABP:Styles-->
</head> </head>
<body class="abp-application-layout bg-light"> <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--> <!--ABP:Scripts-->
<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly/libs/abp/js/abp.js"></script> <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/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script> <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script> <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script> <script src="_framework/blazor.webassembly.js"></script>
<!--/ABP:Scripts--> <!--/ABP:Scripts-->
</body> </body>
</html> </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