-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathloading.css
More file actions
5 lines (5 loc) · 1.55 KB
/
Copy pathloading.css
File metadata and controls
5 lines (5 loc) · 1.55 KB
1
2
3
4
5
/* Loading states that work with the existing markup without JS coupling */
body::after{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 45%,#8bc7ff));transform-origin:left;animation:page-progress .9s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}@keyframes page-progress{0%{transform:scaleX(.05);opacity:1}70%{transform:scaleX(.78);opacity:1}100%{transform:scaleX(1);opacity:0}}
.results-card .empty::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-top-color:var(--primary);border-radius:50%;animation:empty-spin .7s linear infinite,loader-life .25s 1.55s forwards}@keyframes empty-spin{to{transform:rotate(360deg)}}@keyframes loader-life{to{opacity:0;width:0;height:0;margin:0;border-width:0}}
#flightStatNote,#outboundFlightText,#returnFlightText{position:relative}#flightStatNote::after,#outboundFlightText::after,#returnFlightText::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:min(150px,80%);background:linear-gradient(90deg,transparent,var(--primary),transparent);transform:translateX(-110%);opacity:.45;animation:data-scan 1.25s ease-in-out 1 forwards}@keyframes data-scan{0%{transform:translateX(-110%)}100%{transform:translateX(110%);opacity:0}}
@media(prefers-reduced-motion:reduce){body::after,#flightStatNote::after,#outboundFlightText::after,#returnFlightText::after,.results-card .empty::before{display:none!important}}