Creating a dynamic progress bar using a JavaScript counter

My javascript function retrieves time from a specific function, acting as a countdown starting from 00:00 and running until a set time. The timer can be paused and resumed using a button, and it functions properly.

This javascript function provides information on both the elapsed time and the total time!

Now I am working with two CSS elements:

#seek-bg and #seek-bar

I aim to horizontally move the seek-bar along the seek-bg element. Is there a way to achieve this without utilizing jquery?

How should I tie in the timer functionality with these CSS elements?

Code!

#seek-bg {
    height:3px;
    background-color:black;
    width:100px;
    position:relative;
}

#seek-bar{
    background-color:white;
    width:4px;
    height:3px;
}

Answer №1

I am looking to adjust the position of the seek-bar on seek-bg horizontally. Is it feasible to achieve this without using jquery?

Absolutely! You can utilize the HTML5 progress bar for this purpose:

<progress value="10" max="100"></progress>

Visit here to learn more about HTML5 progress bar.

Check out the demonstration here

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

A guide to extracting the port number from the service name using Node.js

We are currently working on a WebSocket server using Nodejs in conjunction with socket.io. In the process, I utilized the createServer method from the HTTP class and proceeded to listen to a specific port like so: var server = http.createServer(); serv ...

Steps to switch from the "on click" event to on mouse over in the following code

Can someone help me modify this code to load the larger image on mouse hover instead of on click? Additionally, is there an easy way to add "next" and "prev" buttons to navigate through all the images once a larger image is loaded? Thank you! /** * Image ...

What is the best approach to sorting nested JSON data in AngularJS?

Currently, I am faced with the challenge of filtering through a nested JSON array within AngularJS. The JSON structure I am dealing with is as follows: articles_data: [{ title: 'Bigfoot Afoot', tags: ['True stories', 'fore ...

Errors always occur when making POST requests in SAPUI5, leading to a 500 Server Error specifically related to OData

Currently diving into the world of SAPUI5 and OData, I am in the process of creating a basic application that showcases employee data in a table. The objective is to add a new employee to the table whose information will be stored in the SAP backend. Whil ...

Top method for adding animation to the undeclared feature on a component

During a recent keynote, I heard that in the future versions of React, it's recommended to hide a component or element using the hidden property. However, I'm curious about how to incorporate a transition effect when toggling the visibility of an ...

Tips on implementing multiple consecutive setState calls in ReactJS

Recently, I discovered that setState is an async call. I'm facing an issue where I need to utilize the updated result from setState immediately after setting it, but due to its async nature, I end up getting the old state value. While researching for ...

What is the method for determining the word/caret location in Google Docs?

If you're unfamiliar with how the Google Docs editor operates, here's a concise explanation: Unlike traditional text editors, Google Docs does not have a visible editable textarea or contentEditable elements. Google Docs detects keydown/press/u ...

Guide on utilizing the .replace() method in JavaScript for loops

Currently, I am working on a task that involves replacing specific numbers in a given string with corresponding characters. To be more precise: The number 5 should be replaced with the character "S" The number 1 should be replaced with the character "I" T ...

Struggling with implementing conditional validators in Angular2 form models. I have tried using myForm.setValidators(), but it doesn't appear to be functioning as expected

I have been experimenting with the model form in an Ionic/Angular2 project. My goal is to implement conditional validation on a form where users initially fill out 6 required fields, and then choose between 'manual' and 'automatic' proc ...

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

Route authentication and login for both client-side (React) and server-side systems

I need to secure my form route in a react application. I have set up registration and login on the server side, but I'm unsure how to handle authentication for that specific route. Below are the client-side routes defined in my app.js file: const App ...

How come emphasizing certain characters in a string doesn't display the <b> tag in React.js?

I am trying to make a specific part of a string bold in my React.js app, but I'm not getting the expected result. Below is the code I am using and the output it produces: data?.map((item) => (<li key={item.id}>{item.title.replace(new RegExp(v ...

Saving numerous files with Promises

There is a Node URL (created using Express) that enables users to download static images of addresses. The calling application sends a request to the /download URL with multiple addresses in JSON format. The download service then calls Google Maps to save ...

What is the reason behind Facebook's use of margin-left: -9999px to conceal elements?

While experimenting with firebug on Facebook's stream, I stumbled upon an interesting discovery regarding the style of the "update options" menu. It appears that they are hiding this menu by using margin-left: -9999px, and displaying it by overriding ...

There seems to be an issue with the alignment in Bootstrap

Just dipping my toes into the world of bootstrap and decided to try out one of the examples from their documentation. Unfortunately, it doesn't seem to be displaying as expected. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boots ...

Align text to the left of a button with Bootstrap 4

Currently, I have two buttons stacked on top of each other. I'm attempting to include some text to the left of the bottom button, but I am encountering two obstacles: The first issue is that it creates a white round-ish shape around my top button w ...

Enhancing Quill Editor with Unique Icons, Such as Undo and Redo Controls Using Vue.js

Currently, I have successfully implemented the functionality of buttons with Vue. However, I am facing an issue in changing their icon, which is currently not displaying anything. How can I resolve this problem? https://codesandbox.io/s/8lnz3r2n12 <te ...

Tips on running jQuery scripts when a div changes its display style from none to block?

Is there a way to trigger jQuery code when the style of a div transitions from `display: none;` to `display: block;`? I am working with tabs, which is why this div's style changes in this manner. The jQuery code should only be executed when this spec ...

Having trouble deploying my React app on my local system. Getting an error message that says "Serve is

I am currently facing an issue while trying to deploy my react app on my local server. After building the app using npm run build, I installed 'serve' with the command npm install -g serve. The installation was successful, but when executing the ...

Implement a feature on React using hooks that detects when a user clicks

I'm attempting to utilize React hooks to check if a user has clicked outside of an element. I'm using useRef to grab a reference to the element. Could someone help me troubleshoot this? I'm encountering the following errors and referencing ...