From c5f1cbd22c8fb2c9bbcd14f9616f4387a133e7de Mon Sep 17 00:00:00 2001
From: Will McGugan <willmcgugan@gmail.com>
Date: Tue, 14 Mar 2023 18:04:58 +0000
Subject: [PATCH] Loading indicator simplify (#2050)

* nice simplify

* import

* changelog

* doc [skip ci]
---
 CHANGELOG.md                              |  5 +++++
 docs/widgets/loading_indicator.md         | 12 ++++++++++--
 src/textual/widgets/_loading_indicator.py | 15 ++-------------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d853dee45..1d3a6a5734 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+### Changed
+
+- Dropped "loading-indicator--dot" component style from LoadingIndicator https://github.com/Textualize/textual/pull/2050
 
 ## [0.15.1] - 2023-03-14
 
diff --git a/docs/widgets/loading_indicator.md b/docs/widgets/loading_indicator.md
index cd3e9ffc4b..805c662b33 100644
--- a/docs/widgets/loading_indicator.md
+++ b/docs/widgets/loading_indicator.md
@@ -5,6 +5,16 @@ Displays pulsating dots to indicate when data is being loaded.
 - [ ] Focusable
 - [ ] Container
 
+You can set the color of the loading indicator by setting its `color` style.
+
+Here's how you would do that with CSS:
+
+```sass
+LoadingIndicator {
+    color: red;
+}
+```
+
 
 === "Output"
 
@@ -17,8 +27,6 @@ Displays pulsating dots to indicate when data is being loaded.
     --8<-- "docs/examples/widgets/loading_indicator.py"
     ```
 
-
-
 ## See Also
 
 * [LoadingIndicator](../api/loading_indicator.md) code reference
diff --git a/src/textual/widgets/_loading_indicator.py b/src/textual/widgets/_loading_indicator.py
index 15cdf8ffc1..b2ac2f13c2 100644
--- a/src/textual/widgets/_loading_indicator.py
+++ b/src/textual/widgets/_loading_indicator.py
@@ -13,19 +13,13 @@
 class LoadingIndicator(Widget):
     """Display an animated loading indicator."""
 
-    COMPONENT_CLASSES = {"loading-indicator--dot"}
-
     DEFAULT_CSS = """
     LoadingIndicator {
         width: 100%;
         height: 100%;
         content-align: center middle;
-    }
-
-    LoadingIndicator > .loading-indicator--dot {
         color: $accent;
     }
-
     """
 
     def on_mount(self) -> None:
@@ -36,11 +30,7 @@ def render(self) -> RenderableType:
         elapsed = time() - self._start_time
         speed = 0.8
         dot = "\u25CF"
-        dot_styles = self.get_component_styles("loading-indicator--dot")
-
-        base_style = self.rich_style
-        background = self.background_colors[-1]
-        color = dot_styles.color
+        _, _, background, color = self.colors
 
         gradient = Gradient(
             (0.0, background.blend(color, 0.1)),
@@ -53,8 +43,7 @@ def render(self) -> RenderableType:
         dots = [
             (
                 f"{dot} ",
-                base_style
-                + Style.from_color(gradient.get_color((1 - blend) ** 2).rich_color),
+                Style.from_color(gradient.get_color((1 - blend) ** 2).rich_color),
             )
             for blend in blends
         ]