# Overview

In Python, we use **Streamlit** to add animations to our apps. These animations involve status and progress messages.

To add the status elements, we'll first import `streamlit` using the following command:
```python
import streamlit as st
```

## 1. Progress bar
It displays a progress bar.
### Syntax
```Python
st.progress(value)
```
### Parameters
* **`value`**: This can either be `int` (`0`-`100`) or `float`(`0.0`-`1.0`).

## 2. Spinner
It temporarily displays a message while executing a code block.

### Syntax
```Python
st.spinner(text="Work in Progress")
```
### Parameters
* **`text`**: This is the message to be displayed.

## 3. Balloons
It adds celebratory balloons.
### Syntax
```python
st.balloons()
```
## 4. Snowflakes
It displays celebratory snowfall.
### Syntax
```python
st.snow()
```
## Example
Let's run the following app to display a progress bar that increases over time, a spinner that shows a message after some time, celebratory balloons, and celebratory snowfall.

import streamlit as st
import time
bar = st.progress(2)
for i in range(100):
    time.sleep(0.04)
    bar.progress(i + 1)
with st.spinner('Wait for it...'):
    time.sleep(5)
st.balloons()
st.snow()

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


shotsdocker

React

Dart

GoJS React

Typescript React

Vue.js

## Explanation
* Lines 1–2: We import `streamlit` and `time` modules.
* Line 3: We create a progress bar by calling `progress().`
* Lines 4–6: We'll display the progress bar.
* Lines 7–8: We'll display a spinner.
* Line 9: We'll display the celebratory balloons.
* Line 10: We'll display the celebratory snowfall.


## 5. Error box
It displays an error message.
### Syntax
```python
st.error(body)
```
### Parameters
* **`body`**: This is the error text to be displayed.

## 6. Warning box
It displays a warning message.
### Syntax
```python
st.warning(body)
```
### Parameters
* **`body`**: This is the warning text to be displayed.

## 7. Info
It displays an informational message.
### Syntax
```python
st.info(body)
```
### Parameters
* **`body`**: This is the information text to be displayed.

## 8. Success
It displays a success message.
### Syntax
```python
st.success(body)
```
### Parameters
* **`body`**: This is the success text to be displayed.

## 9. Exception output
It displays an exception.
### Syntax
```python
st.exception(exception)
```
### Parameters
* **`exception`**: This is the exception to be displayed.

## Example
Let's run the following app to display the error message, warning box, info box, success box, and an exception on the Streamlit web interface.

import streamlit as st
# Error box
st.error("An error has occured")
# Warning box
st.warning("This is a warning")
# Info box
st.info("We have updated the code")
# Success box
st.success("Successfully completed!")
# Exception output
e = RuntimeError('This is an  RuntimeError exception')
st.exception(e)

## Explanation
* Line 1: We'll import the `streamlit` module.
* Lines 3–9: We'll display error, warning, info, and success boxes.
* Lines 11–12: We'll display the runtime exception.


shotsDocker.tar.gz

How to add status elements to the Streamlit Web Interface

Use Streamlit to add progress bars, spinners, balloons, snowflakes, and messages (error, warning, info, success, and exceptions).