feat(widget): progress bars

examples/application/src/main.rs

@@ -82,6 +82,7 @@ pub enum Message {
     Hi,
     Hi2,
     Hi3,
+    Tick,
 }
 
 /// The [`App`] stores application-specific state.
@@ -92,6 +93,7 @@ pub struct App {
     input_2: String,
     hidden: bool,
     keybinds: HashMap<KeyBind, Action>,
+    progress: f32,
 }
 
 /// Implement [`cosmic::Application`] to integrate with COSMIC.
@@ -133,6 +135,7 @@ impl cosmic::Application for App {
             input_2: String::new(),
             hidden: true,
             keybinds: HashMap::new(),
+            progress: 0.0,
         };
 
         let command = app.update_title();
@@ -178,10 +181,17 @@ impl cosmic::Application for App {
             Message::Hi3 => {
                 dbg!("hi 3");
             }
+            Message::Tick => {
+                self.progress = (self.progress + 0.01) % 1.0;
+            }
         }
         Task::none()
     }
 
+    fn subscription(&self) -> iced::Subscription<Self::Message> {
+        iced::time::every(std::time::Duration::from_millis(64)).map(|_| Message::Tick)
+    }
+
     /// Creates a view after each update.
     fn view(&self) -> Element<'_, Self::Message> {
         let page_content = self
@@ -212,6 +222,46 @@ impl cosmic::Application for App {
                         .on_input(Message::Input2)
                         .on_clear(Message::Ignore),
                 )
+                .push(widget::progress_bar::circular::Circular::new().size(50.0))
+                .push(
+                    widget::progress_bar::linear::Linear::new()
+                        .girth(10.0)
+                        .width(Length::Fill),
+                )
+                .push(
+                    widget::progress_bar::circular::Circular::new()
+                        .bar_height(10.0)
+                        .size(50.0)
+                        .progress(self.progress),
+                )
+                .push(
+                    widget::progress_bar::linear::Linear::new()
+                        .girth(10.0)
+                        .progress(self.progress)
+                        .width(Length::Fill),
+                )
+                .push(
+                    widget::progress_bar::circular::Circular::new()
+                        .size(50.0)
+                        .progress(0.0),
+                )
+                .push(
+                    widget::progress_bar::linear::Linear::new()
+                        .girth(10.0)
+                        .progress(0.0)
+                        .width(Length::Fill),
+                )
+                .push(
+                    widget::progress_bar::circular::Circular::new()
+                        .size(50.0)
+                        .progress(1.0),
+                )
+                .push(
+                    widget::progress_bar::linear::Linear::new()
+                        .girth(10.0)
+                        .progress(1.0)
+                        .width(Length::Fill),
+                )
                 .spacing(cosmic::theme::spacing().space_s)
                 .width(Length::Fill)
                 .height(Length::Shrink)

src/widget/mod.rs

@@ -77,9 +77,6 @@ pub use iced::widget::{MouseArea, mouse_area};
 #[doc(inline)]
 pub use iced::widget::{PaneGrid, pane_grid};
 
-#[doc(inline)]
-pub use iced::widget::{ProgressBar, progress_bar};
-
 #[doc(inline)]
 pub use iced::widget::{Responsive, responsive};
 
@@ -257,6 +254,12 @@ pub mod popover;
 #[doc(inline)]
 pub use popover::{Popover, popover};
 
+pub mod progress_bar;
+#[doc(inline)]
+pub use progress_bar::{
+    circular, circular::Circular, circular_progress, linear, linear::Linear, linear_progress, style,
+};
+
 pub mod radio;
 #[doc(inline)]
 pub use radio::{Radio, radio};

src/widget/progress_bar/circular.rs

@@ -0,0 +1,453 @@
+//! Show a circular progress indicator.
+use super::style::StyleSheet;
+use crate::anim::smootherstep;
+use iced::advanced::layout;
+use iced::advanced::renderer;
+use iced::advanced::widget::tree::{self, Tree};
+use iced::advanced::{self, Clipboard, Layout, Shell, Widget};
+use iced::mouse;
+use iced::time::Instant;
+use iced::widget::canvas;
+use iced::window;
+use iced::{Element, Event, Length, Radians, Rectangle, Renderer, Size, Vector};
+
+use std::f32::consts::PI;
+use std::time::Duration;
+
+const MIN_ANGLE: Radians = Radians(PI / 8.0);
+const WRAP_ANGLE: Radians = Radians(2.0 * PI - PI / 4.0);
+const BASE_ROTATION_SPEED: u32 = u32::MAX / 80;
+
+#[must_use]
+pub struct Circular<Theme>
+where
+    Theme: StyleSheet,
+{
+    size: f32,
+    bar_height: f32,
+    style: <Theme as StyleSheet>::Style,
+    cycle_duration: Duration,
+    rotation_duration: Duration,
+    progress: Option<f32>,
+}
+
+impl<Theme> Circular<Theme>
+where
+    Theme: StyleSheet,
+{
+    /// Creates a new [`Circular`] with the given content.
+    pub fn new() -> Self {
+        Circular {
+            size: 40.0,
+            bar_height: 4.0,
+            style: <Theme as StyleSheet>::Style::default(),
+            cycle_duration: Duration::from_millis(1500),
+            rotation_duration: Duration::from_secs(2),
+            progress: None,
+        }
+    }
+
+    /// Sets the size of the [`Circular`].
+    pub fn size(mut self, size: f32) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// Sets the bar height of the [`Circular`].
+    pub fn bar_height(mut self, bar_height: f32) -> Self {
+        self.bar_height = bar_height;
+        self
+    }
+
+    /// Sets the style variant of this [`Circular`].
+    pub fn style(mut self, style: <Theme as StyleSheet>::Style) -> Self {
+        self.style = style;
+        self
+    }
+
+    /// Sets the cycle duration of this [`Circular`].
+    pub fn cycle_duration(mut self, duration: Duration) -> Self {
+        self.cycle_duration = duration / 2;
+        self
+    }
+
+    /// Sets the base rotation duration of this [`Circular`]. This is the duration that a full
+    /// rotation would take if the cycle rotation were set to 0.0 (no expanding or contracting)
+    pub fn rotation_duration(mut self, duration: Duration) -> Self {
+        self.rotation_duration = duration;
+        self
+    }
+
+    /// Override the default behavior by providing a determinate progress value between `0.0` and `1.0`.
+    pub fn progress(mut self, progress: f32) -> Self {
+        self.progress = Some(progress.clamp(0.0, 1.0));
+        self
+    }
+}
+
+impl<Theme> Default for Circular<Theme>
+where
+    Theme: StyleSheet,
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[derive(Clone, Copy)]
+enum Animation {
+    Expanding {
+        start: Instant,
+        progress: f32,
+        rotation: u32,
+        last: Instant,
+    },
+    Contracting {
+        start: Instant,
+        progress: f32,
+        rotation: u32,
+        last: Instant,
+    },
+}
+
+impl Default for Animation {
+    fn default() -> Self {
+        Self::Expanding {
+            start: Instant::now(),
+            progress: 0.0,
+            rotation: 0,
+            last: Instant::now(),
+        }
+    }
+}
+
+impl Animation {
+    fn next(&self, additional_rotation: u32, now: Instant) -> Self {
+        match self {
+            Self::Expanding { rotation, .. } => Self::Contracting {
+                start: now,
+                progress: 0.0,
+                rotation: rotation.wrapping_add(additional_rotation),
+                last: now,
+            },
+            Self::Contracting { rotation, .. } => Self::Expanding {
+                start: now,
+                progress: 0.0,
+                rotation: rotation.wrapping_add(BASE_ROTATION_SPEED.wrapping_add(
+                    (f64::from(WRAP_ANGLE / (2.0 * Radians::PI)) * f64::from(u32::MAX)) as u32,
+                )),
+                last: now,
+            },
+        }
+    }
+
+    fn start(&self) -> Instant {
+        match self {
+            Self::Expanding { start, .. } | Self::Contracting { start, .. } => *start,
+        }
+    }
+
+    fn last(&self) -> Instant {
+        match self {
+            Self::Expanding { last, .. } | Self::Contracting { last, .. } => *last,
+        }
+    }
+
+    fn timed_transition(
+        &self,
+        cycle_duration: Duration,
+        rotation_duration: Duration,
+        now: Instant,
+    ) -> Self {
+        let elapsed = now.duration_since(self.start());
+        let additional_rotation = ((now - self.last()).as_secs_f32()
+            / rotation_duration.as_secs_f32()
+            * (u32::MAX) as f32) as u32;
+
+        match elapsed {
+            elapsed if elapsed > cycle_duration => self.next(additional_rotation, now),
+            _ => self.with_elapsed(cycle_duration, additional_rotation, elapsed, now),
+        }
+    }
+
+    fn with_elapsed(
+        &self,
+        cycle_duration: Duration,
+        additional_rotation: u32,
+        elapsed: Duration,
+        now: Instant,
+    ) -> Self {
+        let progress = elapsed.as_secs_f32() / cycle_duration.as_secs_f32();
+        match self {
+            Self::Expanding {
+                start, rotation, ..
+            } => Self::Expanding {
+                start: *start,
+                progress,
+                rotation: rotation.wrapping_add(additional_rotation),
+                last: now,
+            },
+            Self::Contracting {
+                start, rotation, ..
+            } => Self::Contracting {
+                start: *start,
+                progress,
+                rotation: rotation.wrapping_add(additional_rotation),
+                last: now,
+            },
+        }
+    }
+
+    fn rotation(&self) -> f32 {
+        match self {
+            Self::Expanding { rotation, .. } | Self::Contracting { rotation, .. } => {
+                *rotation as f32 / u32::MAX as f32
+            }
+        }
+    }
+}
+
+#[derive(Default)]
+struct State {
+    animation: Animation,
+    cache: canvas::Cache,
+    progress: Option<f32>,
+}
+
+impl<Message, Theme> Widget<Message, Theme, Renderer> for Circular<Theme>
+where
+    Message: Clone,
+    Theme: StyleSheet,
+{
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(State::default())
+    }
+
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: Length::Fixed(self.size),
+            height: Length::Fixed(self.size),
+        }
+    }
+
+    fn layout(
+        &mut self,
+        _tree: &mut Tree,
+        _renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        layout::atomic(limits, self.size, self.size)
+    }
+
+    fn update(
+        &mut self,
+        tree: &mut Tree,
+        event: &Event,
+        _layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _renderer: &Renderer,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        _viewport: &Rectangle,
+    ) {
+        let state = tree.state.downcast_mut::<State>();
+        if self.progress.is_some() {
+            if !float_cmp::approx_eq!(
+                f32,
+                state.progress.unwrap_or_default(),
+                self.progress.unwrap_or_default()
+            ) {
+                state.progress = self.progress;
+                state.cache.clear();
+            }
+            return;
+        }
+        if let Event::Window(window::Event::RedrawRequested(now)) = event {
+            state.animation =
+                state
+                    .animation
+                    .timed_transition(self.cycle_duration, self.rotation_duration, *now);
+
+            state.cache.clear();
+            shell.request_redraw();
+        }
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        use advanced::Renderer as _;
+
+        let state = tree.state.downcast_ref::<State>();
+        let bounds = layout.bounds();
+        let custom_style =
+            <Theme as StyleSheet>::appearance(theme, &self.style, self.progress.is_some(), true);
+
+        let geometry = state.cache.draw(renderer, bounds.size(), |frame| {
+            let track_radius = frame.width() / 2.0 - self.bar_height;
+            let track_path = canvas::Path::circle(frame.center(), track_radius);
+
+            frame.stroke(
+                &track_path,
+                canvas::Stroke::default()
+                    .with_color(custom_style.track_color)
+                    .with_width(self.bar_height),
+            );
+
+            if let Some(progress) = self.progress {
+                // outer border
+                if let Some(border_color) = custom_style.border_color {
+                    let border_path =
+                        canvas::Path::circle(frame.center(), track_radius + self.bar_height / 2.0);
+
+                    frame.stroke(
+                        &border_path,
+                        canvas::Stroke::default()
+                            .with_color(border_color)
+                            .with_width(1.0),
+                    );
+                }
+
+                // inner border
+                if let Some(border_color) = custom_style.border_color {
+                    let border_path =
+                        canvas::Path::circle(frame.center(), track_radius - self.bar_height / 2.0);
+
+                    frame.stroke(
+                        &border_path,
+                        canvas::Stroke::default()
+                            .with_color(border_color)
+                            .with_width(1.0),
+                    );
+                }
+
+                // bar
+                let mut builder = canvas::path::Builder::new();
+
+                builder.arc(canvas::path::Arc {
+                    center: frame.center(),
+                    radius: track_radius,
+                    start_angle: Radians(-PI / 2.0),
+                    end_angle: Radians(-PI / 2.0 + progress * 2.0 * PI),
+                });
+
+                let bar_path = builder.build();
+
+                frame.stroke(
+                    &bar_path,
+                    canvas::Stroke::default()
+                        .with_color(custom_style.bar_color)
+                        .with_width(self.bar_height),
+                );
+
+                let mut builder = canvas::path::Builder::new();
+
+                // get center of end of arc for rounded cap
+                let end_angle = -PI / 2.0 + progress * 2.0 * PI;
+                let end_center =
+                    frame.center() + Vector::new(end_angle.cos(), end_angle.sin()) * track_radius;
+                builder.arc(canvas::path::Arc {
+                    center: end_center,
+                    radius: self.bar_height / 2.0,
+                    start_angle: Radians(end_angle),
+                    end_angle: Radians(end_angle + PI),
+                });
+
+                // get center of start of arc for rounded cap
+                let start_angle = -PI / 2.0;
+                let start_center = frame.center()
+                    + Vector::new(start_angle.cos(), start_angle.sin()) * track_radius;
+                builder.arc(canvas::path::Arc {
+                    center: start_center,
+                    radius: self.bar_height / 2.0,
+                    start_angle: Radians(start_angle - PI),
+                    end_angle: Radians(start_angle),
+                });
+
+                let cap_path = builder.build();
+                frame.fill(&cap_path, custom_style.bar_color);
+            } else {
+                let mut builder = canvas::path::Builder::new();
+
+                let start = Radians(state.animation.rotation() * 2.0 * PI);
+                let (start_angle, end_angle) = match state.animation {
+                    Animation::Expanding { progress, .. } => (
+                        start,
+                        start + MIN_ANGLE + WRAP_ANGLE * (smootherstep(progress)),
+                    ),
+                    Animation::Contracting { progress, .. } => (
+                        start + WRAP_ANGLE * (smootherstep(progress)),
+                        start + MIN_ANGLE + WRAP_ANGLE,
+                    ),
+                };
+                builder.arc(canvas::path::Arc {
+                    center: frame.center(),
+                    radius: track_radius,
+                    start_angle,
+                    end_angle,
+                });
+
+                let bar_path = builder.build();
+
+                frame.stroke(
+                    &bar_path,
+                    canvas::Stroke::default()
+                        .with_color(custom_style.bar_color)
+                        .with_width(self.bar_height),
+                );
+
+                let mut builder = canvas::path::Builder::new();
+
+                // get center of end of arc for rounded cap
+                let end_center = frame.center()
+                    + Vector::new(end_angle.0.cos(), end_angle.0.sin()) * track_radius;
+                builder.arc(canvas::path::Arc {
+                    center: end_center,
+                    radius: self.bar_height / 2.0,
+                    start_angle: Radians(end_angle.0),
+                    end_angle: Radians(end_angle.0 + PI),
+                });
+
+                // get center of start of arc for rounded cap
+                let start_center = frame.center()
+                    + Vector::new(start_angle.0.cos(), start_angle.0.sin()) * track_radius;
+                builder.arc(canvas::path::Arc {
+                    center: start_center,
+                    radius: self.bar_height / 2.0,
+                    start_angle: Radians(start_angle.0 - PI),
+                    end_angle: Radians(start_angle.0),
+                });
+
+                let cap_path = builder.build();
+                frame.fill(&cap_path, custom_style.bar_color);
+            }
+        });
+
+        renderer.with_translation(Vector::new(bounds.x, bounds.y), |renderer| {
+            use iced::advanced::graphics::geometry::Renderer as _;
+
+            renderer.draw_geometry(geometry);
+        });
+    }
+}
+
+impl<'a, Message, Theme> From<Circular<Theme>> for Element<'a, Message, Theme, Renderer>
+where
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+{
+    fn from(circular: Circular<Theme>) -> Self {
+        Self::new(circular)
+    }
+}

src/widget/progress_bar/linear.rs

@@ -0,0 +1,306 @@
+//! Show a linear progress indicator.
+use iced::advanced::layout;
+use iced::advanced::renderer::{self, Quad};
+use iced::advanced::widget::tree::{self, Tree};
+use iced::advanced::{self, Clipboard, Layout, Shell, Widget};
+use iced::mouse;
+use iced::time::Instant;
+use iced::window;
+use iced::{Background, Element, Event, Length, Rectangle, Size};
+
+use crate::anim::smootherstep;
+
+use super::style::StyleSheet;
+
+use std::time::Duration;
+
+#[must_use]
+pub struct Linear<Theme>
+where
+    Theme: StyleSheet,
+{
+    width: Length,
+    girth: Length,
+    style: Theme::Style,
+    cycle_duration: Duration,
+    progress: Option<f32>,
+}
+
+impl<Theme> Linear<Theme>
+where
+    Theme: StyleSheet,
+{
+    /// Creates a new [`Linear`] with the given content.
+    pub fn new() -> Self {
+        Linear {
+            width: Length::Fixed(100.0),
+            girth: Length::Fixed(4.0),
+            style: Theme::Style::default(),
+            cycle_duration: Duration::from_millis(1500),
+            progress: None,
+        }
+    }
+
+    /// Sets the width of the [`Linear`].
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    /// Sets the girth of the [`Linear`].
+    pub fn girth(mut self, girth: impl Into<Length>) -> Self {
+        self.girth = girth.into();
+        self
+    }
+
+    /// Sets the style variant of this [`Linear`].
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
+
+    /// Sets the cycle duration of this [`Linear`].
+    pub fn cycle_duration(mut self, duration: Duration) -> Self {
+        self.cycle_duration = duration / 2;
+        self
+    }
+
+    /// Override the default behavior by providing a determinate progress value between `0.0` and `1.0`.
+    pub fn progress(mut self, progress: f32) -> Self {
+        self.progress = Some(progress.clamp(0.0, 1.0));
+        self
+    }
+}
+
+impl<Theme> Default for Linear<Theme>
+where
+    Theme: StyleSheet,
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[derive(Clone, Copy)]
+enum State {
+    Expanding { start: Instant, progress: f32 },
+    Contracting { start: Instant, progress: f32 },
+}
+
+impl Default for State {
+    fn default() -> Self {
+        Self::Expanding {
+            start: Instant::now(),
+            progress: 0.0,
+        }
+    }
+}
+
+impl State {
+    fn next(&self, now: Instant) -> Self {
+        match self {
+            Self::Expanding { .. } => Self::Contracting {
+                start: now,
+                progress: 0.0,
+            },
+            Self::Contracting { .. } => Self::Expanding {
+                start: now,
+                progress: 0.0,
+            },
+        }
+    }
+
+    fn start(&self) -> Instant {
+        match self {
+            Self::Expanding { start, .. } | Self::Contracting { start, .. } => *start,
+        }
+    }
+
+    fn timed_transition(&self, cycle_duration: Duration, now: Instant) -> Self {
+        let elapsed = now.duration_since(self.start());
+
+        match elapsed {
+            elapsed if elapsed > cycle_duration => self.next(now),
+            _ => self.with_elapsed(cycle_duration, elapsed),
+        }
+    }
+
+    fn with_elapsed(&self, cycle_duration: Duration, elapsed: Duration) -> Self {
+        let progress = elapsed.as_secs_f32() / cycle_duration.as_secs_f32();
+        match self {
+            Self::Expanding { start, .. } => Self::Expanding {
+                start: *start,
+                progress,
+            },
+            Self::Contracting { start, .. } => Self::Contracting {
+                start: *start,
+                progress,
+            },
+        }
+    }
+}
+
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Linear<Theme>
+where
+    Message: Clone,
+    Theme: StyleSheet,
+    Renderer: advanced::Renderer,
+{
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<State>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(State::default())
+    }
+
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: self.width,
+            height: self.girth,
+        }
+    }
+
+    fn layout(
+        &mut self,
+        _tree: &mut Tree,
+        _renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        layout::atomic(limits, self.width, self.girth)
+    }
+
+    fn update(
+        &mut self,
+        tree: &mut Tree,
+        event: &Event,
+        _layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _renderer: &Renderer,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        _viewport: &Rectangle,
+    ) {
+        if self.progress.is_some() {
+            return;
+        }
+
+        let state = tree.state.downcast_mut::<State>();
+
+        if let Event::Window(window::Event::RedrawRequested(now)) = event {
+            *state = state.timed_transition(self.cycle_duration, *now);
+
+            shell.request_redraw();
+        }
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        _cursor: mouse::Cursor,
+        _viewport: &Rectangle,
+    ) {
+        let bounds = layout.bounds();
+        let custom_style = theme.appearance(&self.style, self.progress.is_some(), false);
+        let state = tree.state.downcast_ref::<State>();
+
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: bounds.y,
+                    width: bounds.width,
+                    height: bounds.height,
+                },
+                border: iced::Border {
+                    width: if custom_style.border_color.is_some() {
+                        1.0
+                    } else {
+                        0.0
+                    },
+                    color: custom_style.border_color.unwrap_or(custom_style.bar_color),
+                    radius: custom_style.border_radius.into(),
+                },
+                snap: true,
+                ..renderer::Quad::default()
+            },
+            Background::Color(custom_style.track_color),
+        );
+
+        if let Some(progress) = self.progress {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        x: bounds.x,
+                        y: bounds.y,
+                        width: progress * bounds.width,
+                        height: bounds.height,
+                    },
+                    border: iced::Border {
+                        width: 0.,
+                        color: iced::Color::TRANSPARENT,
+                        radius: custom_style.border_radius.into(),
+                    },
+                    snap: true,
+                    ..renderer::Quad::default()
+                },
+                Background::Color(custom_style.bar_color),
+            );
+        } else {
+            match state {
+                State::Expanding { progress, .. } => renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: Rectangle {
+                            x: bounds.x,
+                            y: bounds.y,
+                            width: smootherstep(*progress) * bounds.width,
+                            height: bounds.height,
+                        },
+                        border: iced::Border {
+                            width: 0.,
+                            color: iced::Color::TRANSPARENT,
+                            radius: custom_style.border_radius.into(),
+                        },
+                        snap: true,
+                        ..renderer::Quad::default()
+                    },
+                    Background::Color(custom_style.bar_color),
+                ),
+
+                State::Contracting { progress, .. } => renderer.fill_quad(
+                    Quad {
+                        bounds: Rectangle {
+                            x: bounds.x + smootherstep(*progress) * bounds.width,
+                            y: bounds.y,
+                            width: (1.0 - smootherstep(*progress)) * bounds.width,
+                            height: bounds.height,
+                        },
+                        border: iced::Border {
+                            width: 0.,
+                            color: iced::Color::TRANSPARENT,
+                            radius: custom_style.border_radius.into(),
+                        },
+                        snap: true,
+                        ..renderer::Quad::default()
+                    },
+                    Background::Color(custom_style.bar_color),
+                ),
+            }
+        }
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Linear<Theme>> for Element<'a, Message, Theme, Renderer>
+where
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+    Renderer: iced::advanced::Renderer + 'a,
+{
+    fn from(linear: Linear<Theme>) -> Self {
+        Self::new(linear)
+    }
+}

src/widget/progress_bar/mod.rs

@@ -0,0 +1,11 @@
+pub mod circular;
+pub mod linear;
+pub mod style;
+
+pub fn circular_progress<Message>() -> circular::Circular<crate::Theme> {
+    circular::Circular::new()
+}
+
+pub fn linear_progress<Message>() -> linear::Linear<crate::Theme> {
+    linear::Linear::new()
+}

src/widget/progress_bar/style.rs

@@ -0,0 +1,105 @@
+use iced::Color;
+
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The track [`Color`] of the progress indicator.
+    pub track_color: Color,
+    /// The bar [`Color`] of the progress indicator.
+    pub bar_color: Color,
+    /// The border [`Color`] of the progress indicator.
+    pub border_color: Option<Color>,
+    /// The border radius of the progress indicator.
+    pub border_radius: f32,
+}
+
+impl std::default::Default for Appearance {
+    fn default() -> Self {
+        Self {
+            track_color: Color::TRANSPARENT,
+            bar_color: Color::BLACK,
+            border_color: None,
+            border_radius: 0.0,
+        }
+    }
+}
+
+/// A set of rules that dictate the style of an indicator.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default;
+
+    /// Produces the active [`Appearance`] of a indicator.
+    fn appearance(
+        &self,
+        style: &Self::Style,
+        is_determinate: bool,
+        is_circular: bool,
+    ) -> Appearance;
+}
+
+impl StyleSheet for iced::Theme {
+    type Style = ();
+
+    fn appearance(
+        &self,
+        _style: &Self::Style,
+        _is_determinate: bool,
+        _is_circular: bool,
+    ) -> Appearance {
+        let palette = self.extended_palette();
+
+        Appearance {
+            track_color: palette.background.weak.color,
+            bar_color: palette.primary.base.color,
+            border_color: None,
+            border_radius: 0.0,
+        }
+    }
+}
+
+impl StyleSheet for crate::Theme {
+    type Style = ();
+
+    fn appearance(
+        &self,
+        _style: &Self::Style,
+        is_determinate: bool,
+        is_circular: bool,
+    ) -> Appearance {
+        let cur = self.current_container();
+        let mut cur_divider = cur.divider;
+        cur_divider.alpha = 0.5;
+        let theme = self.cosmic();
+
+        let (mut track_color, bar_color) = if theme.is_dark && theme.is_high_contrast {
+            (
+                theme.palette.neutral_6.into(),
+                theme.accent_text_color().into(),
+            )
+        } else if theme.is_dark {
+            (theme.palette.neutral_5.into(), theme.accent_color().into())
+        } else if theme.is_high_contrast {
+            (
+                theme.palette.neutral_4.into(),
+                theme.accent_text_color().into(),
+            )
+        } else {
+            (theme.palette.neutral_3.into(), theme.accent_color().into())
+        };
+
+        if !is_determinate && is_circular {
+            track_color = Color::TRANSPARENT;
+        }
+
+        Appearance {
+            track_color,
+            bar_color,
+            border_color: if is_determinate && theme.is_high_contrast {
+                Some(cur_divider.into())
+            } else {
+                None
+            },
+            border_radius: theme.corner_radii.radius_xl[0],
+        }
+    }
+}

src/widget/segmented_button/widget.rs

@@ -262,10 +262,10 @@ where
             font.hash(&mut hasher);
             let text_hash = hasher.finish();
 
-            if let Some(prev_hash) = state.text_hashes.insert(key, text_hash) {
+            if let Some(prev_hash) = state.text_hashes.insert(key, text_hash)
-                if prev_hash == text_hash {
+                && prev_hash == text_hash
-                    return;
+            {
-                }
+                return;
             }
 
             if let Some(paragraph) = state.paragraphs.get_mut(key) {
@@ -928,7 +928,6 @@ where
 
     fn diff(&mut self, tree: &mut Tree) {
         let state = tree.state.downcast_mut::<LocalState>();
-
         for key in self.model.order.iter().copied() {
             self.update_entity_paragraph(state, key);
         }