From c5225a4c7d08aa33482a12a90cb466efc9e48fd0 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 13 Feb 2018 15:35:57 +0000 Subject: [PATCH] add loading demo shell (#2941) --- demo-shell/src/index.html | 70 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) 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; + } + }
+
Loading Demo Shell..