|
|
@@ -25,7 +25,73 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
- <div id="root"></div>
|
|
|
+ <style>
|
|
|
+ .lds-ellipsis {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .lds-ellipsis div {
|
|
|
+ position: absolute;
|
|
|
+ top: 33px;
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: burlywood;
|
|
|
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
|
+ }
|
|
|
+ .lds-ellipsis div:nth-child(1) {
|
|
|
+ left: 8px;
|
|
|
+ animation: lds-ellipsis1 0.6s infinite;
|
|
|
+ }
|
|
|
+ .lds-ellipsis div:nth-child(2) {
|
|
|
+ left: 8px;
|
|
|
+ animation: lds-ellipsis2 0.6s infinite;
|
|
|
+ }
|
|
|
+ .lds-ellipsis div:nth-child(3) {
|
|
|
+ left: 32px;
|
|
|
+ animation: lds-ellipsis2 0.6s infinite;
|
|
|
+ }
|
|
|
+ .lds-ellipsis div:nth-child(4) {
|
|
|
+ left: 56px;
|
|
|
+ animation: lds-ellipsis3 0.6s infinite;
|
|
|
+ }
|
|
|
+ @keyframes lds-ellipsis1 {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes lds-ellipsis3 {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes lds-ellipsis2 {
|
|
|
+ 0% {
|
|
|
+ transform: translate(0, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate(24px, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <div id="root">
|
|
|
+ <div style="width: 100%; text-align: center; margin-top: 10em">
|
|
|
+ <div class="lds-ellipsis">
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!--
|
|
|
This HTML file is a template.
|
|
|
If you open it directly in the browser, you will see an empty page.
|
visuddhinanda