feat: integrate animation loader (#67)
Integrate animation loader to be shown while application is bootstrapped. Fixes #58
This commit is contained in:
+401
-401
File diff suppressed because it is too large
Load Diff
@@ -1,43 +1,41 @@
|
||||
.wrapper {
|
||||
margin: 50px auto;
|
||||
height: 250px;
|
||||
width: 240px;
|
||||
position: relative;
|
||||
.loader-wrapper {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
animation: rotate 0.7s infinite 1s;
|
||||
animation: rotate 0.8s infinite 0.2s;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-width: 0 100px 100px 100px;
|
||||
border-width: 0 90px 90px 90px;
|
||||
border-color: transparent transparent #1fb050 transparent;
|
||||
bottom: 10px;
|
||||
left: calc(50% - 100px);
|
||||
bottom: calc(50% - 100px);
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
|
||||
.top {
|
||||
border-width: 100px 100px 0 100px;
|
||||
border-width: 90px 90px 0 90px;
|
||||
border-color: #b4d575 transparent transparent transparent;
|
||||
top: 10px;
|
||||
left: calc(50% - 100px);
|
||||
top: calc(50% - 100px);
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
|
||||
.left {
|
||||
border-width: 100px 0 100px 100px;
|
||||
border-width: 90px 0 90px 90px;
|
||||
border-color: transparent transparent transparent #1074b9;
|
||||
top: calc(50% - 100px);
|
||||
left: 10px;
|
||||
top: calc(50% - 90px);
|
||||
left: calc(50% - 100px);
|
||||
}
|
||||
|
||||
.right {
|
||||
border-width: 100px 100px 100px 0;
|
||||
border-width: 90px 90px 90px 0;
|
||||
border-color: transparent #1daeec transparent transparent;
|
||||
top: calc(50% - 100px);
|
||||
right: 10px;
|
||||
top: calc(50% - 90px);
|
||||
right: calc(50% - 100px);
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
|
||||
+6
-1
@@ -37,7 +37,12 @@
|
||||
</script>
|
||||
|
||||
<mifosx-web-app>
|
||||
Loading...
|
||||
<div class="loader-wrapper">
|
||||
<div class="bottom triangle"></div>
|
||||
<div class="top triangle"></div>
|
||||
<div class="left triangle"></div>
|
||||
<div class="right triangle"></div>
|
||||
</div>
|
||||
</mifosx-web-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -10,4 +10,4 @@
|
||||
|
||||
// Global Imports
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "assets/styles/_helper.scss";
|
||||
@import "assets/styles/helper";
|
||||
|
||||
Reference in New Issue
Block a user