diff --git a/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.css b/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.css index 21650b4..470dd50 100644 --- a/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.css +++ b/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.css @@ -30,7 +30,8 @@ padding: 20px; } -.results-error img, .results-end img { +.results-error img, +.results-end img { vertical-align: middle; } @@ -40,4 +41,32 @@ .filter-warning { filter: brightness(0) saturate(100%) invert(52%) sepia(95%) saturate(2039%) hue-rotate(3deg) brightness(106%) contrast(102%); +} + +.loading { + width: fit-content; + font-weight: bold; + font-family: monospace; + font-size: 25px; + align-self: center; + padding: 5px; + margin: 20px; + background: radial-gradient(circle closest-side, #000 94%, #0000) right/calc(200% - 1em) 100%; + animation: l24 1s infinite alternate linear; +} + +.loading::before { + content: "Loading..."; + line-height: 1em; + color: #0000; + background: inherit; + background-image: radial-gradient(circle closest-side, #fff 94%, #000); + -webkit-background-clip: text; + background-clip: text; +} + +@keyframes l24 { + 100% { + background-position: left + } } \ No newline at end of file diff --git a/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.html b/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.html index 903084c..8b44908 100644 --- a/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.html +++ b/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.html @@ -1,21 +1,24 @@ -
-
- {{searchError()}}
-
+
+ {{searchError()}}
+