Select the coloured part of your progress bar, and press Cmd/Ctrl + D to create a copy, and move this shape up on top of the repeated shapes/bars. Adjust the spacing between each of the copied shapes by hovering between the gaps and Left-clicking and dragging when the pink guides appear.ĩ. Select the Repeat Grid Tool in the Property Inspector and Drag from the right edge to repeat the shape up to where your coloured rectangle ends.
The angle of this rectangle can also be adjusted.Ĩ. To add some texture to the progress bar, select the Rectangle Tool and create a small vertical rectangle that is either equal to, or greater than, the height of your progress bar.
Double-click the coloured rectangle, and drag from the right edge to adjust the completion percentage for your progress bar.ħ. Next, with the rectangle selected, set the Fill colour to #67D9F4 or a colour of your choice.Ħ. Change the top-right and bottom-right radius to 0.ĥ. Press Cmd/Ctrl + D to duplicate the rectangle, and in the Property Inspector, select the other radius icon that will allow you to edit the radius of each corner individually. Select either the colour #FFFFFF or #10232C.Ĥ. In the Property Inspector change the radius to a particularly high number, to fully round off all corners. Select the Rectangle Tool, and draw a long thin rectangle the size that you would like your progress bar to be. In this tutorial the colour used was #182F38.ģ. Select the artboard by Left-clicking on the artboard name top-left, and in the Property Inspector on the right, select a Background Fill Colour. In this tutorial, we’re going to learn how to design a progress bar in Adobe XD.Ģ.
0 kommentar(er)
