Fix loader image.

4 years ago · dd5acdd6f3
9 changed files with 20 additions and 5 deletions
--- a/backend/src/Squidex/wwwroot/images/loader-white.gif
+++ b/backend/src/Squidex/wwwroot/images/loader-white.gif
--- a/backend/src/Squidex/wwwroot/images/loader.gif
+++ b/backend/src/Squidex/wwwroot/images/loader.gif
--- a/backend/src/Squidex/wwwroot/images/loader.svg
+++ b/backend/src/Squidex/wwwroot/images/loader.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#3389ff" stroke-width="12" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/backend/src/Squidex/wwwroot/images/logo-white.svg
+++ b/backend/src/Squidex/wwwroot/images/logo-white.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#ffffff" stroke-width="12" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/frontend/app/app.component.html
+++ b/frontend/app/app.component.html
@ -3,7 +3,7 @@
        <sqx-dialog-renderer>
            <router-outlet (activate)="isLoaded = true">
                <div class="loading" *ngIf="!isLoaded">
-                    <img alt="Loading" src="./images/loader.gif">
+                    <img alt="Loading" src="./images/loader.svg">

                    <div>{{ 'common.loading' | sqxTranslate }}</div>
                </div>
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@ -50,7 +50,7 @@
 <body>
    <sqx-app>
        <div class="loading">
-            <img src="./images/loader.gif">
+            <img src="./images/loader.svg">

            <div>Loading Squidex</div>
        </div>
--- a/frontend/app/shell/pages/home/home-page.component.html
+++ b/frontend/app/shell/pages/home/home-page.component.html
@ -1,7 +1,7 @@
 <div class="login-area">
    <div class="card">
        <div class="card-body text-center">
-            <img alt="Logo" class="login-icon login-element" src="./images/logo.png">
+            <img alt="Logo" class="login-icon login-element" src="./images/logo.svg">

            <div>
                <button type="button" class="btn btn-success btn-lg login-button login-element" (click)="login()">
--- a/frontend/app/shell/pages/internal/logo.component.html
+++ b/frontend/app/shell/pages/internal/logo.component.html
@ -1,3 +1,3 @@
-<img [class.hidden]="!isLoading" class="loader" src="./images/loader-white.gif" />
+<img [class.hidden]="!isLoading" class="loader" src="./images/loader-white.svg" />

 <i [class.hidden]="isLoading" class="icon-logo"></i>
--- a/frontend/app/shell/pages/internal/logo.component.scss
+++ b/frontend/app/shell/pages/internal/logo.component.scss
@ -1,3 +1,6 @@
 .loader {
-    @include absolute(12px, null, null, 20px);
+    @include absolute(50%, null, null, 50%);
+    margin-left: -14px;
+    margin-top: -14px;
+    width: 28px;
 }