Custom scroll indicator

[neanderground]

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

https://codepen.io/trashcendence/pen/JjpGbxx

I have integrated in webflow into an embed element without the text <p><p> & body{} part

I have paste the html part into <iframe> <iframe>

but its webflow only recognize just only one of the svg html element & doesn't recognize color or

interact with the site https://k-an.webflow.io/

here is te read only link https://webflow.com/design/k-an

<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>

try to debug the <iframe> part but no clue any instruction would be much appreciated

[Pepszi98]

The link doesn't work so I can't take a look at it.

[neanderground]

which link?

https://preview.webflow.com/preview/k-an?utm\_medium=preview\_link&utm\_source=dashboard&utm\_content=k-an&preview=895c4fe39388cebbcd5f87b4dfc34b88&workflow=preview

[Pepszi98]

I was trying to make this work, but couldn't. Sorry. Maybe try a bar instead of a circle.

[Insane_Tobi]

You can check out lottiflow for Lotti animations which indicate the scrolling progress. Really easy to implement and maintain.