Hi
I’m noob in html, css as well as js but
I forked a custom scroll read indicator in codepen and adjusted & somehow it works
[type or paste code here](https://codepen.io/trashcendence/pen/JjpGbxx)
Now I’m trying to figure it out how to embed in webflow
so far this is the closest where I got, I doesn’t recognize the majority of the svg elements
nor the color.
What am I doing wrong any idea would be appreciated
<iframe
a href="#" class="circle_indicator" aria-label="circle_indicator">
//default circle
<svg width="51" height="51" viewBox="-1 -1 51 51" fill="none">
<g id="default_base">
<circle id="inner circle" cx="25.998" cy="25.998" r="19.8" stroke="url(#paint0_linear_2095_10759)" stroke-width="0.4"/>
<circle id="outer circle grey" cx="25.998" cy="25.998" r="23.5" stroke="#232A2F" stroke-width="3"/>
</g>
<defs>
<linearGradient id="paint0_linear_2095_10759" x1="25.998" y1="5.99805" x2="25.998" y2="45.998" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3200" stop-opacity="0"/>
<stop offset="1" stop-color="#FF3200"/>
</linearGradient>
</defs>
</svg>
// dashed mask circle on top
<svg class="d_circle" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="23.5" transform="rotate(90 25 25)" stroke="#1F262A" stroke-width="3" stroke-linejoin="round" stroke-dasharray="1 1"/>
</svg>
// interactive orange circle
<svg class="circle" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="23.5" transform="rotate(90 25 25)" stroke="url(#paint0_angular_2095_10754)" stroke-width="3" stroke-linejoin="round" stroke-dasharray="1 1"/>
<defs>
<radialGradient id="paint0_angular_2095_10754" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25 25) rotate(-90) scale(25)">
<stop stop-color="#FF3200" stop-opacity="0"/>
<stop offset="1" stop-color="#FF3200"/>
</radialGradient>
</defs>
</svg>
// upper arrow
<svg class="up_arrow" width="26" height="15" viewBox="0 0 26 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.7909 13.2052L23.7052 14.2909C23.3146 14.6815 22.6815 14.6815 22.2909 14.2909L16.1128 8.11279C16.0368 8.03679 15.9735 7.94904 15.9255 7.8529L14.4453 4.89247C14.1712 4.34431 13.6109 3.99805 12.998 3.99805C12.3852 3.99805 11.8249 4.34431 11.5508 4.89247L10.0706 7.8529C10.0226 7.94904 9.9593 8.03679 9.8833 8.11279L3.70515 14.2909C3.31463 14.6815 2.68147 14.6815 2.29094 14.2909L1.20515 13.2052C0.814629 12.8146 0.81463 12.1815 1.20515 11.7909L11.7052 1.29094C11.8927 1.1034 12.147 0.998047 12.4123 0.998047H13.5838C13.849 0.998047 14.1034 1.1034 14.2909 1.29094L24.7909 11.7909C25.1815 12.1815 25.1815 12.8146 24.7909 13.2052Z" fill="url(#paint0_linear_2095_10753)"/>
<defs>
<linearGradient id="paint0_linear_2095_10753" x1="12.998" y1="0.998047" x2="12.998" y2="16.498" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3200"/>
<stop offset="1" stop-color="#FF3200" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</iframe>
<style>
.circle_indicator {
position: fixed;
opacity: 1;
z-index: 2;
bottom: 52px;
right: 51px;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: #232A2F;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
transition: opacity .2s ease,box-shadow .1s linear;
}.back-to-top svg.circle {
transform: rotate(-90deg);
}
.circle_indicator svg.circle {
transform: rotate(-90deg);
}
.circle_indicator svg.circle {
position: absolute;
opacity: 1;
z-index: 3;
bottom: 1.5px;
right: 1px;
width: 51px;
height: 51px;
}
.circle_indicator svg.d_circle{
position: absolute;
opacity: 1;
z-index: 4;
bottom: 1.5px;
right: 1px;
width: 51px;
height: 51px;
}
.circle_indicator svg.up_arrow {
position: absolute;
top: 50%;
left: 50%;
rotation-point:50% 50%;
rotation: 180deg;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.circle_indicator svg.circle circle {
-webkit-transition: all .1s linear;
transition: all .1s linear;
stroke-dasharray: 195;
stroke-dashoffset: 195;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
jQuery(function($) {
var progressBar = $('.circle circle');
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = $(document).height();
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height();
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var progressMax = lastDocumentHeight - lastWindowHeight;
var t = function() {
var t = document.documentElement
, e = document.body
, r = "scrollTop"
, n = "scrollHeight";
return (t[r] || e[r]) / ((t[n] || e[n]) - t.clientHeight)
}()
var strokeDashOffsetValue = Math.max(0, 195 * (1 - t));
progressBar.css("stroke-dashoffset", strokeDashOffsetValue);
ticking = false;
}
window.addEventListener('scroll', onScroll, {passive: true});
window.addEventListener('resize', onResize, false);
update();
});
</script>
Here is my site Read-Only: LINK
(how to share your site Read-Only link)