.progress-wrap {
position: fixed;
right: 50px;
bottom: 50px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;
background-color: rgba(0, 123, 186, 0.8); -webkit-transform: translateY(15px) translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, opacity; pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
-webkit-transform: translateY(0) translate3d(0, 0, 0);
} .progress-wrap::after {
position: absolute;
content: '↑';
text-align: center;
line-height: 46px;
font-size: 20px;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 200ms linear;
}
.progress-wrap:hover::after {
color: #fff;
} .progress-wrap .progress-circle {
width: 46px;
height: 46px;
}
.progress-wrap .progress-circle path {
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 4;
fill: none;
box-sizing: border-box;
transition: stroke 200ms linear;
}
.progress-wrap:hover .progress-circle path {
stroke: #fff;
} .progress-wrap.no-progress .progress-circle {
display: none;
}
.progress-wrap.no-progress {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
} @media (max-width: 768px) {
.progress-wrap {
right: 20px;
bottom: 20px;
height: 40px;
width: 40px; position: fixed;
-webkit-transform: translateY(15px) translate3d(0, 0, 0);
transform: translateY(15px) translate3d(0, 0, 0); isolation: isolate; contain: layout style;
}
.progress-wrap.active-progress {
-webkit-transform: translateY(0) translate3d(0, 0, 0);
transform: translateY(0) translate3d(0, 0, 0);
}
.progress-wrap::after {
line-height: 40px;
height: 40px;
width: 40px;
font-size: 18px;
}
.progress-wrap .progress-circle {
width: 40px;
height: 40px;
}
} .progress-wrap:focus {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.progress-wrap:focus::after {
color: #fff;
}
.progress-wrap:focus .progress-circle path {
stroke: #fff;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(15px);
}
} .progress-wrap.animate-in {
animation: fadeInUp 200ms ease-out forwards;
}
.progress-wrap.animate-out {
animation: fadeOutDown 200ms ease-out forwards;
} @media (prefers-contrast: high) {
.progress-wrap {
background-color: #000000;
border: 2px solid #ffffff;
}
.progress-wrap::after {
color: #ffffff;
}
.progress-wrap .progress-circle path {
stroke: #ffffff;
}
} @media (prefers-reduced-motion: reduce) {
.progress-wrap,
.progress-wrap::after,
.progress-wrap .progress-circle path {
transition: none;
}
.progress-wrap.animate-in,
.progress-wrap.animate-out {
animation: none;
}
} @media (prefers-color-scheme: dark) {
.progress-wrap {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.progress-wrap::after {
color: rgba(255, 255, 255, 0.9);
}
.progress-wrap .progress-circle path {
stroke: rgba(255, 255, 255, 0.9);
}
} .progress-wrap { background-color: var(--back-to-top-bg-color, rgba(0, 123, 186, 0.8));
width: var(--back-to-top-size, 46px);
height: var(--back-to-top-size, 46px);
bottom: var(--back-to-top-bottom, 50px);
right: var(--back-to-top-right, 50px);
}
.progress-wrap::after {
color: var(--back-to-top-text-color, rgba(255, 255, 255, 0.8));
line-height: var(--back-to-top-size, 46px);
height: var(--back-to-top-size, 46px);
width: var(--back-to-top-size, 46px);
}
.progress-wrap .progress-circle {
width: var(--back-to-top-size, 46px);
height: var(--back-to-top-size, 46px);
}
.progress-wrap .progress-circle path {
stroke: var(--back-to-top-progress-color, rgba(255, 255, 255, 0.8));
} .progress-wrap:hover::after {
color: var(--back-to-top-text-color-hover, #fff);
}
.progress-wrap:hover .progress-circle path {
stroke: var(--back-to-top-progress-color-hover, #fff);
}