CODEWITHSUNDEEP
javascripthtmlcss
WhatisSober
WhatisSober

Reputation: 988

Making a progress bar from a javascript counter

I have a javascript function which gets time from a function. Its like a counter starting from 00:00 and goes on to a fixed time. The timer can be paused/resumed with a button. And it works fine.

The javascript function gives time elapsed and total time!

Now I have two CSS: 

#seek-bg and #seek-bar

I want to move the seek-bar on seek-bg horizontally. Is it possible to do so without jquery?

How can I connect the timer and these CSS?

Code!

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

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

Upvotes: 0

Views: 2864

Answers (1)

defau1t
defau1t

Reputation: 10619

I want to move the seek-bar on seek-bg horizontally. Is it possible to do so without jquery?

Yes it is possible. Take a look at HTML5 progress bar:

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

http://www.hongkiat.com/blog/html5-progress-bar/

DEMO

Upvotes: 1

Related Questions