diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-06-09 10:06:27 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-06-09 10:06:27 +0900 |
| commit | e166ad678014585c12c779bc2d72e82a366362e6 (patch) | |
| tree | 9a687a998db527deea89ae53ad0b308bf7cb08a8 | |
| parent | Merge branch 'master' of https://github.com/syuilo/misskey (diff) | |
| download | misskey-e166ad678014585c12c779bc2d72e82a366362e6.tar.gz misskey-e166ad678014585c12c779bc2d72e82a366362e6.tar.bz2 misskey-e166ad678014585c12c779bc2d72e82a366362e6.zip | |
Better init screen
| -rw-r--r-- | src/client/app/base.pug | 8 | ||||
| -rw-r--r-- | src/client/app/init.css | 40 |
2 files changed, 18 insertions, 30 deletions
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. + <svg viewBox="0 0 50 50"> + <path fill=#{themeColor} d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" /> + </svg> 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); } } |