# Offline Indicator Theme Component

**URL:** <https://meta.discourse.org/t/offline-indicator-theme-component/225130>\
**Category:** Theme component\
**Created:** [April 24, 2022, 3:06am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130 "2022-04-24T03:06:07Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [April 24, 2022, 3:06am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/1 "2022-04-24T03:06:07Z")

</div>

Hello 👋 This theme component is a simple offline indicator which appears when user have internet connection problems.

 ![Screenshot 2022-04-24 at 0.26.32](https://global.discourse-cdn.com/meta/original/4X/4/8/a/48a04ca0c2d16a2ac70bd6138511c1706ce1107a.png)

 ![Screenshot 2022-04-24 at 0.22.38](https://global.discourse-cdn.com/meta/original/4X/6/c/0/6c0e76df5649d29cb89856affb3a0b9ccdfa3ecc.png)

 ![Screenshot 2022-04-24 at 0.22.51](https://global.discourse-cdn.com/meta/original/4X/b/5/5/b55539f111a89625b2f10414c14f50f6ea8e57a3.png)

On desktop the indicator shows on bottom right.

**There are some settings which you can customize the indicator.**

`offline indicator icon`  
You can use FontAwesome icons. This icon appear before **Oops…You’re offline** title.

`offline indicator width`  
This width is only affect on desktop view. On mobile it use `width: calc(100% - 20px);`

`offline indicator rounding`  
This is the indicator border radius. You can make the corners rounded if increase the value.

 ![Screenshot 2022-04-24 at 1.00.07](https://global.discourse-cdn.com/meta/original/4X/b/0/0/b002fdc9d3321646ce47a30dc74ba40eb35b4bbe.png)

**And translations…**

 ![Screenshot 2022-04-24 at 0.16.55](https://global.discourse-cdn.com/meta/original/4X/0/3/4/034ebbd9789bdfdad2044dc8a8a340d7d8380dde.png)

| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/discourse-offline-indicator](https://github.com/VaperinaDEV/discourse-offline-indicator) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

_[View the full topic](https://meta.discourse.org/t/offline-indicator-theme-component/225130)._