/*@jsxRuntime automatic @jsxImportSource react*/ /* ## Animated status elements screenshot

Progress bar

Display a progress bar. ```java for i in range(101): st.progress(i) do_something_slow() ```

Spinner

Temporarily displays a message while executing a block of code. ```java with st.spinner("Please wait..."): do_something_slow() ``` screenshot

Status container

Display output of long-running tasks in a container. ```java with st.status('Running'): do_something_slow() ``` screenshot

Toast

Briefly displays a toast message in the bottom-right corner. ```java st.toast('Butter!', icon='🧈') ``` screenshot

Balloons

Display celebratory balloons! ```java st.balloons() ``` screenshot

Snowflakes

Display celebratory snowflakes! ```java st.snow() ``` */ /* screenshot

Success box

Display a success message. ```java st.success("Match found!") ``` screenshot

Info box

Display an informational message. ```java st.info("Dataset is updated every day at midnight.") ``` screenshot

Warning box

Display warning message. ```java st.warning("Unable to fetch image. Skipping...") ``` */ /* screenshot

Exception output

Display an exception. ```java e = RuntimeError("This is an exception of type RuntimeError") st.exception(e) ``` */ /* screenshot

Stqdm

The simplest way to handle a progress bar in streamlit app. Created by [@Wirg](https://github.com/Wirg). ```python from stqdm import stqdm for _ in stqdm(range(50)): sleep(0.5) ``` screenshot

Custom notification box

A custom notification box with the ability to close it out. Created by [@Socvest](https://github.com/Socvest). ```python from streamlit_custom_notification_box import custom_notification_box styles = {'material-icons':{'color': 'red'}, 'text-icon-link-close-container': {'box-shadow': '#3896de 0px 4px'}, 'notification-text': {'':''}, 'close-button':{'':''}, 'link':{'':''}} custom_notification_box(icon='info', textDisplay='We are almost done with your registration...', externalLink='more info', url='#', styles=styles, key="foo") ``` screenshot

Streamlit Extras

A library with useful Streamlit extras. Created by [@arnaudmiribel](https://github.com/arnaudmiribel/). ```python from streamlit_extras.let_it_rain import rain rain(emoji="🎈", font_size=54, falling_speed=5, animation_length="infinite",) ``` */ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", a: "a", span: "span", p: "p", h2: "h2", pre: "pre", code: "code" }, _provideComponents(), props.components), {TileContainer, RefCard, Image} = _components; if (!Image) _missingMdxReference("Image", true); if (!RefCard) _missingMdxReference("RefCard", true); if (!TileContainer) _missingMdxReference("TileContainer", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "display-progress-and-status", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#display-progress-and-status", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Display progress and status"] }), "\n", _jsx(_components.p, { children: "Jeamlit provides a few methods that allow you to add animation to your\napps. These animations include progress bars, status messages (like\nwarnings), and celebratory balloons." }), "\n", "\n", _jsxs(_components.h2, { id: "simple-callout-messages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#simple-callout-messages", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Simple callout messages"] }), "\n", _jsx(TileContainer, { children: _jsxs(RefCard, { href: "/develop/api-reference/status/jt.error", children: [_jsx(Image, { pure: true, alt: "screenshot", src: "/images/api/error.jpg" }), _jsx("h4", { children: "Error box" }), _jsx(_components.p, { children: "Display error message." }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-java", children: "Jt.error(\"We encountered an error\").use();\n" }) })] }) }), "\n"] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Display progress and status

Simple callout messages

Error box

Still have questions?