|
|
@@ -10,47 +10,115 @@
|
|
|
<title>Angel Token</title>
|
|
|
<style type="text/css">
|
|
|
/* HTML: <div class="loader"></div> */
|
|
|
+ #Loading,
|
|
|
+ #Loading > div {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
#Loading {
|
|
|
- position: absolute;
|
|
|
- top: 40%;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 50%;
|
|
|
left: 50%;
|
|
|
+ position: absolute;
|
|
|
transform: translateY(-50%) translateX(-50%);
|
|
|
- white-space: nowrap;
|
|
|
- width: fit-content;
|
|
|
- font-size: 40px;
|
|
|
- font-family: system-ui, sans-serif;
|
|
|
- font-weight: bold;
|
|
|
- text-transform: uppercase;
|
|
|
- color: #0000;
|
|
|
- -webkit-text-stroke: 1px #000;
|
|
|
- background:
|
|
|
- radial-gradient(0.71em at 50% 1em, #000 99%, #0000 101%)
|
|
|
- calc(50% - 1em) 1em/2em 200% repeat-x text,
|
|
|
- radial-gradient(0.71em at 50% -0.5em, #0000 99%, #000 101%) 50%
|
|
|
- 1.5em/2em 200% repeat-x text;
|
|
|
- animation:
|
|
|
- l10-0 0.8s linear infinite alternate,
|
|
|
- l10-1 4s linear infinite;
|
|
|
-
|
|
|
- text-shadow: 1px 1px 2px #40A4FB;
|
|
|
- }
|
|
|
- #Loading:before {
|
|
|
- content: "Angel Token";
|
|
|
- }
|
|
|
- @keyframes l10-0 {
|
|
|
- to {
|
|
|
- background-position-x: 50%, calc(50% + 1em);
|
|
|
+ z-index: 100;
|
|
|
+ display: block;
|
|
|
+ font-size: 0;
|
|
|
+ color: #4F4F4F;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading.la-dark {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading > div {
|
|
|
+ display: inline-block;
|
|
|
+ float: none;
|
|
|
+ background-color: currentColor;
|
|
|
+ border: 0 solid currentColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading > div:nth-child(1),
|
|
|
+ #Loading > div:nth-child(2) {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading > div:nth-child(1) {
|
|
|
+ top: -25%;
|
|
|
+ z-index: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10%;
|
|
|
+ animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading > div:nth-child(2) {
|
|
|
+ bottom: -9%;
|
|
|
+ height: 10%;
|
|
|
+ background: #000;
|
|
|
+ border-radius: 50%;
|
|
|
+ opacity: 0.2;
|
|
|
+ animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading.la-sm {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading.la-2x {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Loading.la-3x {
|
|
|
+ width: 96px;
|
|
|
+ height: 96px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes square-jelly-box-animate {
|
|
|
+ 17% {
|
|
|
+ border-bottom-right-radius: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 25% {
|
|
|
+ transform: translateY(25%) rotate(22.5deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ border-bottom-right-radius: 100%;
|
|
|
+ transform: translateY(50%) scale(1, 0.9) rotate(45deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 75% {
|
|
|
+ transform: translateY(25%) rotate(67.5deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0) rotate(90deg);
|
|
|
}
|
|
|
}
|
|
|
- @keyframes l10-1 {
|
|
|
- to {
|
|
|
- background-position-y: -0.5em, 0;
|
|
|
+
|
|
|
+ @keyframes square-jelly-box-shadow {
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.25, 1);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div id="Loading"></div>
|
|
|
+ <div id="Loading">
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
<div id="app"></div>
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
|
</body>
|
