> For the complete documentation index, see [llms.txt](https://inscada.gitbook.io/ins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://inscada.gitbook.io/ins/en-1/user-interface/development/animations/bar.md).

# Bar

With a bar-type animation, we can change the size of an object on the mimic display. 

## Bar-Tag

As shown in Figure 1, we configure the proportional change of a variable value named "Percent" of a rectangular object on a mimic screen in the range of 0-100.

![Figure 1 : Bar-Tag Animasyon](/files/-LkSb1f7AoDb0hZaE85v)

## Bar-Expression

Unlike Bar-Tag animation, you can change the size of an object, not just by the selection of variables, but as a result of user-programmable operations.

Below are small examples that can be written in the Bar-Expression section.

#### Examples

```javascript
var val=ins.getVariableValue("STREAM01_LINE_PRESSURE");
var max=ins.getVariableValue("STREAM01_LINE_PRESSURE_MAX");
var min=ins.getVariableValue("STREAM01_LINE_PRESSURE_MIN");
result=(val/(max-min))*100;    // adjusting the value range of the bar graph
return result;


```

```javascript
var val=ins.getVariableValue("POOL_LEVEL");
return (val/206)*100;  // min=0  ,  max=206 

```