128 lines
No EOL
2.6 KiB
Handlebars
128 lines
No EOL
2.6 KiB
Handlebars
<style>
|
|
body {
|
|
overflow-x: hidden; /* For the loading progress bar */
|
|
}
|
|
|
|
/* Do not show content until the main CSS is loaded (which overrides opacity) */
|
|
.page-wrapper {
|
|
opacity: 0;
|
|
}
|
|
|
|
.loading-progress {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 2px;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* https://codepen.io/holdencreative/pen/vEVbwv */
|
|
.progress {
|
|
position: relative;
|
|
height: 2px;
|
|
display: block;
|
|
width: 100%;
|
|
background-clip: padding-box;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress .indeterminate {
|
|
background-color: #E91E63;
|
|
}
|
|
|
|
.progress .indeterminate:before {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
}
|
|
|
|
.progress .indeterminate:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
-webkit-animation-delay: 1.15s;
|
|
animation-delay: 1.15s;
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
</style> |