diff --git a/demo-shell/src/index.html b/demo-shell/src/index.html
index c5efa5aa03..9f93c74da2 100644
--- a/demo-shell/src/index.html
+++ b/demo-shell/src/index.html
@@ -17,7 +17,7 @@
.loader-container {
display: flex;
- flex-direction: row;
+ flex-direction: column;
height:100%;
align-items: center;
@@ -29,16 +29,84 @@
max-width:300px;
}
+ .loader-spinner {
+ max-height:300px;
+ max-width:300px;
+ }
+
.loader-text{
white-space: nowrap;
text-align: center;
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;
+ }
+ }