feat: integrate animation loader (#67)

Integrate animation loader to be shown while application is
bootstrapped.

Fixes #58
This commit is contained in:
Abhay Chawla
2018-06-26 18:06:50 +05:30
committed by GitHub
parent 32b94503dd
commit 3d6a4bbc2d
4 changed files with 424 additions and 421 deletions
File diff suppressed because it is too large Load Diff
+16 -18
View File
@@ -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
View File
@@ -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
View File
@@ -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";