inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2026-09-09 18:02:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

update loading indicator

Browse Source
This commit is contained in:
Denys Vuika
2018-06-21 10:11:23 +01:00
parent 35e752b99f
commit 6b62151ad9
1 changed files with 30 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+30 -45
View File
@@ -9,61 +9,46 @@
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<style> <style>
.loading { @keyframes bouncing-loader {
position: absolute; from {
top: 50%; opacity: 1;
left: 50%; transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
} }
.bouncing-loader {
.loading-bar { display: flex;
display: inline-block; justify-content: center;
width: 4px; position: absolute;
height: 18px; top: 50%;
border-radius: 4px; left: 50%;
animation: loading 1s ease-in-out infinite;
} }
.bouncing-loader > div {
.loading-bar:nth-child(1) { width: 1rem;
background-color: #3498db; height: 1rem;
animation-delay: 0; margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
} }
.bouncing-loader > div:nth-child(2) {
.loading-bar:nth-child(2) { animation-delay: 0.2s;
background-color: #c0392b;
animation-delay: 0.09s;
} }
.bouncing-loader > div:nth-child(3) {
.loading-bar:nth-child(3) { animation-delay: 0.4s;
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
} }
</style> </style>
</head> </head>
<body> <body>
<main> <main>
<app-root> <app-root>
<div class="loading"> <div class="bouncing-loader">
<div class="loading-bar"></div> <div></div>
<div class="loading-bar"></div> <div></div>
<div class="loading-bar"></div> <div></div>
<div class="loading-bar"></div>
</div> </div>
</app-root> </app-root>
</main> </main>