inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

add loading demo shell (#2941)

Browse Source
This commit is contained in:
Eugenio Romano 2018-02-13 15:35:57 +00:00 committed by GitHub
parent 239772bbb2
commit c5225a4c7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
demo-shell/src/index.html
View File

@ -17,7 +17,7 @@
.loader-container { .loader-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
height:100%; height:100%;
align-items: center; align-items: center;
@ -29,16 +29,84 @@
max-width:300px; max-width:300px;
} }
.loader-spinner {
max-height:300px;
max-width:300px;
}
.loader-text{ .loader-text{
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.loader {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circular {
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
stroke: #B6463A;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
@keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
</style> </style>
</head> </head>
<body class="adf-background-color"> <body class="adf-background-color">
<app-root> <app-root>
<div id="loader-container" class="loader-container"> <div id="loader-container" class="loader-container">
<div class="loader-spinner">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
</svg>
</div>
<div class="loader-item"> <div class="loader-item">
<div id="loader-text" class="loader-text">Loading Demo Shell..</div> <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
</div> </div>