Tips on implementing a circular progress bar with locomotive scroll functionality

Can anyone help me integrate progress functionality with Locomotive Scroll using JavaScript?

Link to CodePen for reference

Check out this code snippet from Locomotive Scroll that calculates the percentage of pages scrolled:

const scroller = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
})

const bar = document.querySelector('.progress-wrap path');

scroller.on('scroll', ({ limit, scroll }) => {
  const progress = scroll.y / limit.y * 100

  bar.style.width = `${progress}%`
  console.log(`${progress}%`)
})

I'm unsure about the specific code to replace in this section:

bar.style.width = `${progress}%`

For the full version of JavaScript code, it can be found beneath the locomotive scroll code here: CodePen Link

Answer №1

mastering the technique involves utilizing stroke properties

scroller.on('scroll', ({ limit, scroll }) => {
  const progress = scroll.y / limit.y * 250

  bar.style = `stroke-dashoffset:${progress}px`
})

a creative option is to employ an SVG for visual progression

<div class="progress">
<svg viewBox="0 0 100 100"><g><circle cx="50" cy="50" r="49" style="stroke-dashoffset: 0px;"></circle></g></svg>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing an xajax/ javascript function simultaneously

Is there a way to simultaneously execute the same function? Here is an example: function convert_points() { show_loading(); xajax_ConvertPoints(); xajax_GetRegularGamingCards(); } When xajax_ConvertPoints is called, there seems to be a mill ...

The Discord.js error message popped up, stating that it was unable to access the property 'then' since it was undefined

I'm currently working on implementing a mute command for my discord bot, but I'm encountering an error that says; TypeError: Cannot read property 'then' of undefined I am unsure of what is causing this issue and would greatly apprecia ...

The Vuetify navigation drawer seems to have a quirk where it only closes after an item

I am brand new to Vue and struggling to figure out why my vue v-navigation-drawer is not working properly. It is located in app-root.vue and was initially closing when clicking on a drawer item, but now requires two clicks to close. After the first click, ...

Tippy.js tooltips are not adapting to CSS styling as expected

My experience with tippy.js in my browser had been smooth until this morning. All of a sudden, they stopped responding to any CSS styling and simply defaulted to a dark grey background with border radius. However, they still respond to changes in the scrip ...

Tips for preventing real-time changes to list items using the onchange method

I am facing an issue with a list of items that have an Edit button next to them. When I click the Edit button, a modal pops up displaying the name of the item for editing. However, before clicking the save button, the selected item in the list gets changed ...

Determine whether one class is a parent class of another class

I'm working with an array of classes (not objects) and I need to add new classes to the array only if a subclass is not already present. However, the current code is unable to achieve this since these are not initialized objects. import {A} from &apo ...

Utilizing JavaScript Callbacks in HTML Image Tags

Currently I am working on a small application and looking to include a YouTube section. I have come across a method for obtaining the user's YouTube icon: This is included in the head section of my code: <script type="text/javascript" src="http:/ ...

What is the purpose of the tabindex in the MUI Modal component?

Struggling with integrating a modal into my project - it's refusing to close and taking up the entire screen height. On inspection, I found this troublesome code: [tabindex]: outline: none; height: 100% How can I remove height: 100% from the ...

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

I am facing the challenge of fetching data from a web service located on a different server without knowing if the user has an active session on that server. If the user does have a session, I want to retrieve the data automatically. However, if they do no ...

Enhanced jQuery Embed Code validation for user input using a textarea

Currently, I am developing a website that allows users to input embed codes from popular platforms such as Twitter, YouTube, Instagram, Facebook, and so on. The embed code undergoes validation checks and is saved if it meets the criteria. However, when us ...

The function google.script.run encounters an error when dealing with file inputs

For the past two years, my Google Apps Script connected to a spreadsheet has been working flawlessly. I created an HTML form to upload CSV and Excel files for processing and data loading into the spreadsheet. However, since March 2020, file uploading has b ...

Element width shrinks inside container query

Can you explain why using container-type: inline-size renders the span normally but collapses the button? <span style="container-type: inline-size; outline: 1px solid blue;"> This is a span </span> <button style="container-type: inli ...

The issue of overwritten callbacks is occurring due to the use of multiple .use() functions on the

Utilizing a module known as consign, I am able to conveniently include multiple modules from a directory all at once, eliminating the need for numerous require statements. In my code, I have set the mount path for each endpoint at the beginning of the rout ...

Tips on obtaining a Firebase ID

Does anyone have a solution for retrieving the unique id from Firebase? I've attempted using name(), name, key, and key() without any success. Although I can view the data, I'm struggling to find a way to retrieve the id. This information is cru ...

Employing buffers and streams for data transmission

I am in need of a node.js program that can effectively handle a large JSON dataset with thousands of records. Specifically, I require a script that can extract only the "name" key from each record and transfer it to another file using streams. If there ar ...

Define the term "Parse Error" as it pertains to CSS

i'm encountering an issue while attempting to validate my CSS. Despite trying to validate using direct input (copy and paste), the error persists. In my pursuit to find a solution, I researched on Google only to discover that it could be related to sp ...

Utilizing Ajax to upload various files from separate input sources simultaneously

I want to upload multiple textual/select inputs along with two different file inputs to a PHP file using Ajax. The images from the file inputs are specific and need to be identified by their input names, so I cannot use <input type="file" multiple>. ...

Concerns with JavaScript Scope

I'm currently working on a function that I need help with. The function seems pretty straightforward to me: function CheckFile(path){ var status = false; $.ajax({ url: "http://mydomain.com/"+path, type: "HEAD", s ...

jquery dialog content vanishing upon second opening

My jQuery code is set up to display a dialog when a button is clicked. The issue I'm experiencing is that after closing the dialog and reopening it, the text area within the dialog appears empty with only three buttons visible. However, upon subsequen ...

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...