@JeongJun wrote:
I added a small custom spinner in the app-root tag for my app’s first slow loading by this guideline: https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554
like below.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Ionic App</title> <base href="/"/> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="msapplication-tap-highlight" content="no"/> <link rel="icon" type="image/png" href="assets/icon/favicon.png"/> <!-- add to homescreen for ios --> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <link rel="manifest" href="manifest.webmanifest"> <meta name="theme-color" content="#1976d2"> <!-- First App loading--> <style type="text/css"> body, html { height: 100%; } .app-loading { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .app-loading .spinner { height: 200px; width: 200px; animation: rotate 2s linear infinite; transform-origin: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .app-loading .spinner .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; stroke: #ddd; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } </style> </head> <body> <app-root> <div class="app-loading"> <svg class="spinner" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> </div> </app-root> <noscript>Please enable JavaScript to continue using this application.</noscript> </body> </html>Even I tried other tutorials which is similar to previous one, everything doesn’t work. Is there the best practice for Ionic?
Posts: 1
Participants: 1