diff --git a/fastprogress/_nbdev.py b/fastprogress/_nbdev.py
index fc806f6..dd58d0c 100644
--- a/fastprogress/_nbdev.py
+++ b/fastprogress/_nbdev.py
@@ -4,6 +4,7 @@
 
 index = {"format_time": "00_core.ipynb",
          "html_progress_bar": "00_core.ipynb",
+         "html_progress_bar_styles": "00_core.ipynb",
          "text2html_table": "00_core.ipynb",
          "in_colab": "00_core.ipynb",
          "IN_COLAB": "00_core.ipynb",
diff --git a/fastprogress/core.py b/fastprogress/core.py
index d27190b..27d3a00 100644
--- a/fastprogress/core.py
+++ b/fastprogress/core.py
@@ -1,6 +1,7 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: nbs/00_core.ipynb (unless otherwise specified).
 
-__all__ = ['format_time', 'html_progress_bar', 'text2html_table', 'in_colab', 'IN_COLAB', 'in_notebook', 'IN_NOTEBOOK']
+__all__ = ['format_time', 'html_progress_bar', 'html_progress_bar_styles', 'text2html_table', 'in_colab', 'IN_COLAB',
+           'in_notebook', 'IN_NOTEBOOK']
 
 # Cell
 def format_time(t):
@@ -11,23 +12,29 @@ def format_time(t):
     else:     return f'{m:02d}:{s:02d}'
 
 # Cell
+
+# the styles are static so we'll keep the browser from recalculating
+# them every time we update the progress bar widget
+html_progress_bar_styles = """
+<style>
+    /* Turns off some styling */
+    progress {
+        /* gets rid of default border in Firefox and Opera. */
+        border: none;
+        /* Needs to be in here for Safari polyfill so background images work as expected. */
+        background-size: auto;
+    }
+    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {
+        background: #F44336;
+    }
+</style>
+"""
+
 def html_progress_bar(value, total, label, interrupted=False):
     "Html code for a progress bar `value`/`total` with `label`"
     bar_style = 'progress-bar-interrupted' if interrupted else ''
     return f"""
     <div>
-        <style>
-            /* Turns off some styling */
-            progress {{
-                /* gets rid of default border in Firefox and Opera. */
-                border: none;
-                /* Needs to be in here for Safari polyfill so background images work as expected. */
-                background-size: auto;
-            }}
-            .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {{
-                background: #F44336;
-            }}
-        </style>
       <progress value='{value}' class='{bar_style}' max='{total}' style='width:300px; height:20px; vertical-align: middle;'></progress>
       {label}
     </div>
diff --git a/fastprogress/fastprogress.py b/fastprogress/fastprogress.py
index 177b327..b01f0a5 100644
--- a/fastprogress/fastprogress.py
+++ b/fastprogress/fastprogress.py
@@ -107,7 +107,9 @@ class NBProgressBar(ProgressBar):
     def on_iter_begin(self):
         super().on_iter_begin()
         self.progress = html_progress_bar(0, self.total, "")
-        if self.display: self.out = display(HTML(self.progress), display_id=True)
+        if self.display:
+            display(HTML(html_progress_bar_styles))
+            self.out = display(HTML(self.progress), display_id=True)
         self.is_active=True
 
     def on_interrupt(self):
@@ -138,6 +140,7 @@ def __init__(self, gen, total=None, hide_graph=False, order=None, clean_on_inter
 
     def on_iter_begin(self):
         self.html_code = '\n'.join([html_progress_bar(0, self.main_bar.total, ""), ""])
+        display(HTML(html_progress_bar_styles))
         self.out = display(HTML(self.html_code), display_id=True)
 
     def on_interrupt(self):
diff --git a/nbs/00_core.ipynb b/nbs/00_core.ipynb
index 6265deb..fa294d5 100644
--- a/nbs/00_core.ipynb
+++ b/nbs/00_core.ipynb
@@ -66,23 +66,29 @@
    "outputs": [],
    "source": [
     "# export\n",
+    "\n",
+    "# the styles are static so we'll keep the browser from recalculating\n",
+    "# them every time we update the progress bar widget\n",
+    "html_progress_bar_styles = \"\"\"\n",
+    "<style>\n",
+    "    /* Turns off some styling */\n",
+    "    progress {\n",
+    "        /* gets rid of default border in Firefox and Opera. */\n",
+    "        border: none;\n",
+    "        /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
+    "        background-size: auto;\n",
+    "    }\n",
+    "    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
+    "        background: #F44336;\n",
+    "    }\n",
+    "</style>\n",
+    "\"\"\"\n",
+    "\n",
     "def html_progress_bar(value, total, label, interrupted=False):\n",
     "    \"Html code for a progress bar `value`/`total` with `label`\"\n",
     "    bar_style = 'progress-bar-interrupted' if interrupted else ''\n",
     "    return f\"\"\"\n",
     "    <div>\n",
-    "        <style>\n",
-    "            /* Turns off some styling */\n",
-    "            progress {{\n",
-    "                /* gets rid of default border in Firefox and Opera. */\n",
-    "                border: none;\n",
-    "                /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
-    "                background-size: auto;\n",
-    "            }}\n",
-    "            .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {{\n",
-    "                background: #F44336;\n",
-    "            }}\n",
-    "        </style>\n",
     "      <progress value='{value}' class='{bar_style}' max='{total}' style='width:300px; height:20px; vertical-align: middle;'></progress>\n",
     "      {label}\n",
     "    </div>\n",
diff --git a/nbs/01_fastprogress.ipynb b/nbs/01_fastprogress.ipynb
index 3e4d8b0..4e6d48c 100644
--- a/nbs/01_fastprogress.ipynb
+++ b/nbs/01_fastprogress.ipynb
@@ -266,7 +266,9 @@
     "    def on_iter_begin(self):\n",
     "        super().on_iter_begin()\n",
     "        self.progress = html_progress_bar(0, self.total, \"\")\n",
-    "        if self.display: self.out = display(HTML(self.progress), display_id=True)\n",
+    "        if self.display:\n",
+    "            display(HTML(html_progress_bar_styles))\n",
+    "            self.out = display(HTML(self.progress), display_id=True)\n",
     "        self.is_active=True\n",
     "\n",
     "    def on_interrupt(self):\n",
@@ -290,23 +292,35 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "    /* Turns off some styling */\n",
+       "    progress {\n",
+       "        /* gets rid of default border in Firefox and Opera. */\n",
+       "        border: none;\n",
+       "        /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
+       "        background-size: auto;\n",
+       "    }\n",
+       "    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
+       "        background: #F44336;\n",
+       "    }\n",
+       "</style>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
     {
      "data": {
       "text/html": [
        "\n",
        "    <div>\n",
-       "        <style>\n",
-       "            /* Turns off some styling */\n",
-       "            progress {\n",
-       "                /* gets rid of default border in Firefox and Opera. */\n",
-       "                border: none;\n",
-       "                /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
-       "                background-size: auto;\n",
-       "            }\n",
-       "            .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
-       "                background: #F44336;\n",
-       "            }\n",
-       "        </style>\n",
        "      <progress value='100' class='' max='100' style='width:300px; height:20px; vertical-align: middle;'></progress>\n",
        "      100.00% [100/100 00:05<00:00]\n",
        "    </div>\n",
@@ -330,23 +344,35 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "    /* Turns off some styling */\n",
+       "    progress {\n",
+       "        /* gets rid of default border in Firefox and Opera. */\n",
+       "        border: none;\n",
+       "        /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
+       "        background-size: auto;\n",
+       "    }\n",
+       "    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
+       "        background: #F44336;\n",
+       "    }\n",
+       "</style>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
     {
      "data": {
       "text/html": [
        "\n",
        "    <div>\n",
-       "        <style>\n",
-       "            /* Turns off some styling */\n",
-       "            progress {\n",
-       "                /* gets rid of default border in Firefox and Opera. */\n",
-       "                border: none;\n",
-       "                /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
-       "                background-size: auto;\n",
-       "            }\n",
-       "            .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
-       "                background: #F44336;\n",
-       "            }\n",
-       "        </style>\n",
        "      <progress value='0' class='progress-bar-interrupted' max='100' style='width:300px; height:20px; vertical-align: middle;'></progress>\n",
        "      Interrupted\n",
        "    </div>\n",
@@ -397,6 +423,7 @@
     "        \n",
     "    def on_iter_begin(self):\n",
     "        self.html_code = '\\n'.join([html_progress_bar(0, self.main_bar.total, \"\"), \"\"])\n",
+    "        display(HTML(html_progress_bar_styles))\n",
     "        self.out = display(HTML(self.html_code), display_id=True)\n",
     "\n",
     "    def on_interrupt(self):\n",
@@ -463,6 +490,30 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "    /* Turns off some styling */\n",
+       "    progress {\n",
+       "        /* gets rid of default border in Firefox and Opera. */\n",
+       "        border: none;\n",
+       "        /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
+       "        background-size: auto;\n",
+       "    }\n",
+       "    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
+       "        background: #F44336;\n",
+       "    }\n",
+       "</style>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
     {
      "data": {
       "text/html": [
@@ -490,6 +541,30 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "    /* Turns off some styling */\n",
+       "    progress {\n",
+       "        /* gets rid of default border in Firefox and Opera. */\n",
+       "        border: none;\n",
+       "        /* Needs to be in here for Safari polyfill so background images work as expected. */\n",
+       "        background-size: auto;\n",
+       "    }\n",
+       "    .progress-bar-interrupted, .progress-bar-interrupted::-webkit-progress-bar {\n",
+       "        background: #F44336;\n",
+       "    }\n",
+       "</style>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
     {
      "data": {
       "text/html": [