diff --git a/src/client/app/base.pug b/src/client/app/base.pug index a77a8a9595..11b150bc67 100644 --- a/src/client/app/base.pug +++ b/src/client/app/base.pug @@ -42,7 +42,7 @@ html | JavaScriptを有効にしてください br | Please turn on your JavaScript - div#ini: p - span . - span . - span . + div#ini. + + + diff --git a/src/client/app/init.css b/src/client/app/init.css index fa59195f71..6ee25d64e2 100644 --- a/src/client/app/init.css +++ b/src/client/app/init.css @@ -32,42 +32,30 @@ body > noscript { left: 0; width: 100%; height: 100%; - text-align: center; background: #fff; cursor: wait; } - #ini > p { - display: block; - user-select: none; - margin: 32px; - font-size: 4em; - color: #555; + #ini > svg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 64px; + height: 64px; + animation: ini 0.6s infinite linear; } - #ini > p > span { - animation: ini 1.4s infinite ease-in-out both; - } - #ini > p > span:nth-child(1) { - animation-delay: 0s; - } - #ini > p > span:nth-child(2) { - animation-delay: 0.16s; - } - #ini > p > span:nth-child(3) { - animation-delay: 0.32s; - } html[data-darkmode] #ini { background: #191b22; } - html[data-darkmode] #ini > p { - color: #fff; - } @keyframes ini { - 0%, 80%, 100% { - opacity: 1; + from { + transform: rotate(0deg); } - 40% { - opacity: 0; + to { + transform: rotate(360deg); } }