CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Kathan Shah
Kathan Shah

Reputation: 1755

Show progress animation using svg images

two images

I tried with overlapping and increasing width of another but as they are not linear or simple like a rectangle .

by overlapping into divs i m getting this but it isn't smooth

I don't know if anyone have an idea to make progress bar out of these two images using html, css, js and these are svg files

Upvotes: 1

Views: 209

Answers (1)

Kathan Shah
Kathan Shah

Reputation: 1755

Increase or decrease the width of the second div. Make sure the inner images are not width:100% or responsive

<html>
<head>
<title>Test</title>
</head>
<body>
    <div id="img1" style="position: absolute;top: 0;">
        <img src="amplitude.svg">
    </div>
    <div id="img2" style="position: absolute;top: 0;width: 20%;overflow: hidden;">
        <img src="amplitude-progress.svg">
    </div>
</body>
</html>

Upvotes: 1

Related Questions