Loading indicator simplify (#2050)
* nice simplify * import * changelog * doc [skip ci]
This commit is contained in:
parent
d80e38ce03
commit
c5f1cbd22c
3 changed files with 17 additions and 15 deletions
|
|
@ -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/)
|
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||||
and this project adheres to [Semantic Versioning](http://semver.org/).
|
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
|
## [0.15.1] - 2023-03-14
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,16 @@ Displays pulsating dots to indicate when data is being loaded.
|
||||||
- [ ] Focusable
|
- [ ] Focusable
|
||||||
- [ ] Container
|
- [ ] 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"
|
=== "Output"
|
||||||
|
|
||||||
|
|
@ -17,8 +27,6 @@ Displays pulsating dots to indicate when data is being loaded.
|
||||||
--8<-- "docs/examples/widgets/loading_indicator.py"
|
--8<-- "docs/examples/widgets/loading_indicator.py"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## See Also
|
## See Also
|
||||||
|
|
||||||
* [LoadingIndicator](../api/loading_indicator.md) code reference
|
* [LoadingIndicator](../api/loading_indicator.md) code reference
|
||||||
|
|
|
||||||
|
|
@ -13,19 +13,13 @@ from ..widget import Widget
|
||||||
class LoadingIndicator(Widget):
|
class LoadingIndicator(Widget):
|
||||||
"""Display an animated loading indicator."""
|
"""Display an animated loading indicator."""
|
||||||
|
|
||||||
COMPONENT_CLASSES = {"loading-indicator--dot"}
|
|
||||||
|
|
||||||
DEFAULT_CSS = """
|
DEFAULT_CSS = """
|
||||||
LoadingIndicator {
|
LoadingIndicator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
content-align: center middle;
|
content-align: center middle;
|
||||||
}
|
|
||||||
|
|
||||||
LoadingIndicator > .loading-indicator--dot {
|
|
||||||
color: $accent;
|
color: $accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
"""
|
"""
|
||||||
|
|
||||||
def on_mount(self) -> None:
|
def on_mount(self) -> None:
|
||||||
|
|
@ -36,11 +30,7 @@ class LoadingIndicator(Widget):
|
||||||
elapsed = time() - self._start_time
|
elapsed = time() - self._start_time
|
||||||
speed = 0.8
|
speed = 0.8
|
||||||
dot = "\u25CF"
|
dot = "\u25CF"
|
||||||
dot_styles = self.get_component_styles("loading-indicator--dot")
|
_, _, background, color = self.colors
|
||||||
|
|
||||||
base_style = self.rich_style
|
|
||||||
background = self.background_colors[-1]
|
|
||||||
color = dot_styles.color
|
|
||||||
|
|
||||||
gradient = Gradient(
|
gradient = Gradient(
|
||||||
(0.0, background.blend(color, 0.1)),
|
(0.0, background.blend(color, 0.1)),
|
||||||
|
|
@ -53,8 +43,7 @@ class LoadingIndicator(Widget):
|
||||||
dots = [
|
dots = [
|
||||||
(
|
(
|
||||||
f"{dot} ",
|
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
|
for blend in blends
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue