Rotating/Moving Progressbar

[Karuzo]

Hey Guys,

so i want to make a smooth progress bar.

But i need a little help with it. I have a picture, but i want to rotate/move the stripes.

I have a dx drawn image, i'm trying to use the rotation arguments but it looks kinda weird.

Is there any possibility to rotate the stripes only around the progressbar ?

Here is a screenshot of my progress bar( i mean the dark green stripes):

[Karuzo]

So you can understand me better what i am trying to tell you, here's an example(first one):

http://css-tricks.com/examples/ProgressBars/

[WhoAmI]

I only found this https://wiki.multitheftauto.com/wiki/DxDrawGifImage

Or create image with long width and just change the X position.

[50p]

You can create GUI image (1x1 transparent image) or a label without text and then another image of the texture (the green stripes) but set its parent to the transparent image or a label. Then you need to animate the background, to do that, I'd create 2 background images snapped to each other and then move then in 1 direction (left or right). When one image gets to the end then move it to the other side of its neighbor and keep them moving. Once it's all working, extend the size of the parent (label or transparent image).

[NeO_DUFFMAN]

Like i had mentioned in skype, i would use dxDrawImageSection and then animate it using interpolateBetween. And to make it loop after it completes one cycle, i reset the tick count to make it start all over again. This is the first time i have attempted something like this so i might be wrong about this or there might be a much simpler and better alternative. But anyway, it worked for me. Check out the code and give it a try :3

local visibleState = false 
  
function handleRender() 
local now = getTickCount() 
local elapsedTime = now - start 
local duration = 2000 
local progress = elapsedTime / duration 
local a = interpolateBetween (0,0,0,500,0,0, progress, "Linear") 
         
dxDrawImageSection(20,500,200,20,a,0,500,32,"bar.png",180) 
if elapsedTime >= 2000 then start = getTickCount();now = getTickCount() return end 
end 
  
bindKey("m","down", 
function() 
    if visibleState == false then 
     
        start = getTickCount() 
        visibleState = true 
        addEventHandler("onClientRender",root,handleRender) 
  
    else 
        start = getTickCount() 
        visibleState = false 
        removeEventHandler("onClientRender",root,handleRender) 
    end 
end) 
  

The image that i have used: