added loading screen
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
padding: clamp(24px, 3.5vw, 56px);
|
||||
color: #f5f3ee;
|
||||
@@ -37,13 +37,11 @@
|
||||
background: linear-gradient(90deg, #17171238, transparent 45%, #17171238);
|
||||
}
|
||||
.loader__topline,
|
||||
.loader__footer,
|
||||
.loader__center {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.loader__topline,
|
||||
.loader__footer {
|
||||
.loader__topline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -75,36 +73,6 @@
|
||||
.loader__title em {
|
||||
font-weight: 400;
|
||||
}
|
||||
.loader__footer {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.loader__track {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background: #ffffff38;
|
||||
}
|
||||
.loader__progress {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f3ee;
|
||||
transform: translateX(-100%);
|
||||
animation: loader-progress 1.9s linear forwards;
|
||||
}
|
||||
.loader__progress::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #f5f3ee;
|
||||
border-radius: 50%;
|
||||
background: #29271f;
|
||||
content: "";
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
.loader__announcement {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -113,11 +81,6 @@
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@keyframes loader-progress {
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.loader__title {
|
||||
font-size: clamp(54px, 19vw, 86px);
|
||||
@@ -130,10 +93,4 @@
|
||||
.loader {
|
||||
transition: none;
|
||||
}
|
||||
.loader__progress {
|
||||
animation: none;
|
||||
}
|
||||
.loader__progress {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,13 +101,6 @@ export default function Loader() {
|
||||
<em>to structure.</em>
|
||||
</p>
|
||||
</div>
|
||||
<div className="loader__footer">
|
||||
<span>Warp</span>
|
||||
<span className="loader__track" aria-hidden="true">
|
||||
<span className="loader__progress" />
|
||||
</span>
|
||||
<span>Weft</span>
|
||||
</div>
|
||||
<span className="loader__announcement">
|
||||
Loading Radhe Radhe Synthetics
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user