diff --git a/index.html b/index.html index c701db4..5320701 100644 --- a/index.html +++ b/index.html @@ -133,15 +133,32 @@ } /* HTML:
*/ .loader { - width: 120px; - height: 20px; - background: - linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat - lightblue; - animation: l2 1s infinite linear; + width: 50px; + aspect-ratio: 1; + display: grid; } - @keyframes l2 { - 100% {background-position: right -50px top 0} + .loader::before, + .loader::after { + content:""; + grid-area: 1/1; + --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000); + background: + var(--c) 50% 0, + var(--c) 50% 100%, + var(--c) 100% 50%, + var(--c) 0 50%; + background-size: 12px 12px; + animation: l12 1s infinite; + } + .loader::before { + margin: 4px; + filter: hue-rotate(45deg); + background-size: 8px 8px; + animation-timing-function: linear + } + + @keyframes l12 { + 100%{transform: rotate(.5turn)} }