inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-19 17:14:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

simple loading indicator

Browse Source
This commit is contained in:
Denys Vuika 2018-05-15 20:38:22 +01:00
parent 3ff9a9b536
commit 122f26e015
1 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/index.html
View File

@ -7,8 +7,63 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<style>
.loading {
position: absolute;
top: 50%;
left: 50%;
}
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
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>
</head>
<body>
<app-root></app-root>
<app-root>
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
</app-root>
</body>
</html>