# Progress Bar

### General Settings

### Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-e99eb6e11d2bb385fffcc338677549f787d97b67%2FElement%20-%20Progress%20Bar%20-%20Size.png?alt=media)

### Background Color

If you want to change the background color of your button, you can do that by clicking on the content you want to adjust its background.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-bf7cf20c60f5c248d74dbc39d656343270fede60%2FElement%20-%20Progress%20Bar.png?alt=media)

### Typography Type

Here you can edit the font of your text/content.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-7a3badf8a92cb7ae6f8bbb0f29e1be0c2f9510d2%2FElement%20-%20Progress%20Bar%20-%20Typography%20Type.png?alt=media)

### Text Options

#### Percent

This is where you can add/edit the text in your button.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-f4fdc12bc1ad9257b475fdc6fe33bac2ba6b4a81%2FElement%20-%20Progress%20Bar%20-%20Text%20option.png?alt=media)

### Spacing Option:

for adjusting your Top and Bottom margin. Depending on the Edit option you are working on, the settings will only be applicable to that option.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a05572fc5a4087363f47657e0ad9168b249cde0c%2FElement%20-%20Progress%20Bar%20-%20Spacing%20Option.png?alt=media)

### Theme

You can select a theme from the theme options available here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-94105cf61a50098c2fb64e8ea1de0c6bd26a3e0b%2FElement%20-%20Progress%20Bar%20-%20Theme.png?alt=media)

## Advanced Settings

### Border Option:

**Border**\\

Decide what type of borderline you want. If you click on any border type aside from "No Border", it drops down more border options;

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-11acd3992c0ddd3afdbed9ea1d4d6e3115f2aec0%2FElement%20-%20Progress%20Bar%20-%20Border.png?alt=media)

**Style** \
Select the type of borderline style you want.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-3b16dc963b80b6c91e161ed1765ed2426be3776c%2FElement%20-%20Progress%20Bar%20-%20Border%20style.png?alt=media)

**Width** \
Click here to select how thick you want the borderline to be.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-24e5b207b1cb25b23ffb44fbdaeaf984e098e21c%2FElement%20-%20Progress%20Bar%20-%20Border%20Width.png?alt=media)

**Color** \
Choose a color for your borderline.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-227501d15f43dd0785d9f2e123c933764bc5140c%2FElement%20-%20Progress%20Bar%20-%20Border%20Color.png?alt=media)

**Radius**\
&#x20;If you don't want your borderline to have a sharp corner edge, you can decide how curvy you want the edge to be by selecting from the radius options.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-60e5143379588dbabfbffaa08e676edbb7ac57c3%2FElement%20-%20Progress%20Bar%20-%20Border%20Radius.png?alt=media)

**Radius Edges** \
Here you can choose which side of the edge you want to adjust; All edges, Top only, or bottom only.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-4c810532e83ca8fa86c0b1d7c5c69f3ffe177752%2FElement%20-%20Progress%20Bar%20-%20Border%20Radius%20edge.png?alt=media)

### Text Shadow

If you want your text/content to have a shadow, simply select how strong or light you want the shadow to be.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-4227a5f2198129681412fe865cee1d2ff61cefbe%2FElement%20-%20Progress%20Bar%20-%20text%20shadow.png?alt=media)

### Text Style

Here you can choose what style of text you want, it's either Bold, Italic, or Bold and Italic.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c501139ad07e0bd5986bb350257d040767432d20%2FElement%20-%20Progress%20Bar%20-%20text%20Style.png?alt=media)

### Text Align

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-1d681a693cf41933803c0ff0e2cce88fad2ee7b6%2FElement%20-%20Progress%20Bar%20-%20text%20Align.png?alt=media)

### Box Shadow

Here you can add shadow to your box to make the border visible.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a01fbc1a2e2cb63b43dfa8d262fd44db6a672d0f%2FElement%20-%20Progress%20Bar%20-%20Box%20Shadow.png?alt=media)

### Percent Width

You can increase the width of your progress bar up to 100% (Full width).

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-f007b48755b2753010754bb63cbaf21506ec304b%2FElement%20-%20Progress%20Bar%20-%20Percent%20width.png?alt=media)

### Sizes

You can increase the height of the progress bar.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-e99eb6e11d2bb385fffcc338677549f787d97b67%2FElement%20-%20Progress%20Bar%20-%20Size.png?alt=media)

### Offset Color

Here you can color the other side of the progress bar.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-fd97b09732d29ec41e47a9e784e5bd1b69fad5d6%2FElement%20-%20Progress%20Bar%20-%20Offset%20Color.png?alt=media)

### Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-8865377bee51d2a9f14fffa9320f71c136dcff82%2FElement%20-%20Progress%20Bar%20-%20Visibilty.png?alt=media)

### Custom Class

Input your custom class here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-1f1dad5a57b61cff88f9a5029bf04c7dcbb545e8%2FElement%20-%20Progress%20Bar%20-%20Custom%20Class.png?alt=media)

### CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-ca0077826801c441137a445413f6457b02d42252%2FElement%20-%20Progress%20Bar%20-%20CSS%20Selector.png?alt=media)
