diff --git a/css/media.css b/css/media.css index cad16d1..e613c66 100644 --- a/css/media.css +++ b/css/media.css @@ -65,6 +65,22 @@ } @media only screen and (max-width: 800px) { + .loading-screen .dot { + height: 10px; + width: 10px; + margin: 0 2px; + } + + @keyframes jump { + 0%, 40%, 100% { + transform: translateY(-10px); + } + + 20% { + transform: translateY(-20px); + } + } + nav { position: absolute; justify-content: center; diff --git a/css/style.css b/css/style.css index d40e129..817a869 100755 --- a/css/style.css +++ b/css/style.css @@ -114,7 +114,7 @@ button { /*----------------------------------------------------*/ -.loading-screen { +.preloader { width: 100%; height: 100vh; background-color: transparent; @@ -124,29 +124,47 @@ button { position: fixed; z-index: 999; opacity: 1; - transition: opacity .5s ease; + transition: opacity .3s ease; backdrop-filter: blur(48px); } -.loading-screen .loader { - width: 70px; - padding: 9px; - aspect-ratio: 1; +.preloader .dot { + background-color: var(--gold); + height: 12px; + width: 12px; border-radius: 50%; - background: var(--gold); - --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; - mask: var(--_m); - mask-composite: subtract; - animation: spin 1s infinite linear; + display: inline-block; + margin: 0 3px; + animation: jump 0.8s infinite ease-in-out; } -@keyframes spin { - to { - transform: rotate(1turn); +.preloader .dot.a { + animation-delay: -0.6s; +} + +.preloader .dot.b { + animation-delay: -0.5s; +} + +.preloader .dot.c { + animation-delay: -0.4s; +} + +.preloader .dot.d { + animation-delay: -0.3s; +} + +@keyframes jump { + 0%, 40%, 100% { + transform: translateY(-12px); + } + + 20% { + transform: translateY(-24px); } } -.loading-screen-hide { +.preloader-hide { opacity: 0; } diff --git a/index.html b/index.html index bb4c667..347a152 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,11 @@ -
-
+
+
+
+
+