# Whenever i try to load a page from dash application, I see "Loading..." before the content is displayed. Please suggest me a way to remove that text and replace it with css spinner

**URL:** <https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515>\
**Category:** Dash Python\
**Created:** [September 30, 2020, 5:32am UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515 "2020-09-30T05:32:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![prasad\_ppn](https://avatars.discourse-cdn.com/v4/letter/p/65b543/32.png) [@prasad\_ppn](https://community.plotly.com/u/prasad_ppn)\
**Post date:** [September 30, 2020, 5:32am UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/1 "2020-09-30T05:32:10Z")

</div>

I used the following simple code in `dashapp.py` file:

```auto
from logging import debug
from dash import Dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html 
from dash.dependencies import Input, Output, State
from config import appserver
import time

external_stylesheets = [dbc.themes.YETI,'./frontend/static/stylesheet.css']

dashapp = Dash( __name__ , server = appserver,external_stylesheets=external_stylesheets, url_base_pathname='/application/', title='Home Page', assets_url_path='assets')

dashapp.css.config.serve_locally = True

dashapp.layout = html.Div([
    html.H1('Hi Welcome to Dash-Flask integration app!'),
], id="child-process")

if __name__ ==' __main__':
    dashapp.run_server(debug=True)

```

I used the following `CSS` in `stylesheet.css` file:

```auto
*[data-dash-is-loading="true"]{
  visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
  content: "Loading...";
  display: inline-block;
  color: magenta;
  visibility: visible;
}

```

---

<div class="post-metadata">

**Author:** ![prasad\_ppn](https://avatars.discourse-cdn.com/v4/letter/p/65b543/32.png) [@prasad\_ppn](https://community.plotly.com/u/prasad_ppn)\
**Post date:** [November 27, 2020, 9:02am UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/2 "2020-11-27T09:02:02Z")

</div>

Anyone provide me answer pls

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [November 27, 2020, 3:15pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/3 "2020-11-27T15:15:06Z")

</div>

Hi [prasad\_ppn](https://community.plotly.com/u/prasad_ppn),  
I think you must use dcc.Loading Component instead of CSS.

> **[dcc.Loading | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/loading)**

Using the **fullscreen=True** otion if you want to show it in a full screen.  
And the **type** option you want.

---

<div class="post-metadata">

**Author:** ![prasad\_ppn](https://avatars.discourse-cdn.com/v4/letter/p/65b543/32.png) [@prasad\_ppn](https://community.plotly.com/u/prasad_ppn)\
**Post date:** [November 27, 2020, 4:41pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/4 "2020-11-27T16:41:13Z")

</div>

Tried even with dcc.loading, still the same Loading… Text at start of each page in browser

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [November 27, 2020, 5:07pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/5 "2020-11-27T17:07:00Z")

</div>

See the section called: Customizing or Removing Dash’s “Updating…” Message [https://dash.plotly.com/external-resources](https://dash.plotly.com/external-resources)

---

<div class="post-metadata">

**Author:** ![prasad\_ppn](https://avatars.discourse-cdn.com/v4/letter/p/65b543/32.png) [@prasad\_ppn](https://community.plotly.com/u/prasad_ppn)\
**Post date:** [December 11, 2020, 5:37pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/6 "2020-12-11T17:37:54Z")

</div>

Problem is not with updating… text in title bar… problem is with loading… Text in browser window everytime i load the page

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [December 11, 2020, 6:17pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/7 "2020-12-11T18:17:09Z")

</div>

You can customise it with some CSS. Here’s an example that replaces it with a Bootstrap spinner

```auto
.
├── app.py
└── assets
    └── style.css

```

```python
# app.py
import time

import dash
import dash_bootstrap_components as dbc

def serve_layout():
    # add delay to initial layout load so we can see the spinner
    time.sleep(2)
    return dbc.Container(dbc.Alert("Testing"), className="p-5")

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = serve_layout

if __name__ == " __main__":
    app.run_server(debug=True)

```

```css
/* assets/style.css */
._dash-loading {
  margin: auto;
  color: transparent;
  width: 0;
  height: 0;
  text-align: center;
}

._dash-loading::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: black;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
  margin-top: 2rem;
}

```

---

<div class="post-metadata">

**Author:** ![prasad\_ppn](https://avatars.discourse-cdn.com/v4/letter/p/65b543/32.png) [@prasad\_ppn](https://community.plotly.com/u/prasad_ppn)\
**Post date:** [January 23, 2021, 3:53pm UTC](https://community.plotly.com/t/whenever-i-try-to-load-a-page-from-dash-application-i-see-loading-before-the-content-is-displayed-please-suggest-me-a-way-to-remove-that-text-and-replace-it-with-css-spinner/45515/8 "2021-01-23T15:53:06Z")

</div>

**Worked like a charm!! Thank you so much for the help. Keeping only CSS file worked for me!!**