CODEWITHSUNDEEP
javascripthtml
user2624849
user2624849

Reputation: 11

How would I go about making a custom (very weirdly shaped progress bar) in HTML?

Would it be possible to create (in effect, a progress bar) in HTML, or any type of method in HTML that can emulate the effect of a progress bar by having a track fill up to a certain point? I will also need to be able to control to what % the track fills up to. See image example: https://i.sstatic.net/x1Do2.jpg

Note: the parts where the track curves will have curved edges.

This could be simply animated in flash, however, for other purposes this needs to be done strictly using HTML5 or Javascript. Would this be possible?

I can't even begin to imagine how to go about achieving this.

Upvotes: 0

Views: 224

Answers (2)

artm
artm

Reputation: 8584

See sonic.js and demo

You define paths and then display it. This works as a loading gif using canvas but you should be able to modify the js to display it as a progress bar.

var square = new Sonic({
    width: 100,
    height: 100,
    fillColor: '#000',
    path: [
        ['line', 10, 10, 90, 10],
        ['line', 90, 10, 90, 90],
        ['line', 90, 90, 10, 90],
        ['line', 10, 90, 10, 10]
    ]
});

square.play();

document.body.appendChild(square.canvas);

Upvotes: 1

David Waters
David Waters

Reputation: 12028

Yes it would be possible to do this in html and javascript.

There are a lot of ways to achieve this.

The simplest being 100 images 1 for each percent complete.

Another way would be to have a lot of divs with a fixed size,position and back ground color, then toggle there visibility.

A third was would be to use a canvas element and draw onto the canvas as progress happened.

If you needed a forth way you could use SVG to achieve this effect.

Upvotes: -1

Related Questions