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": [