[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThe media progress indicator visually represents the duration and elapsed playing time of media in automotive OS media apps.\u003c/p\u003e\n"],["\u003cp\u003eIt has two forms: linear for larger screens and circular for smaller screens or minimized controls.\u003c/p\u003e\n"],["\u003cp\u003eThe indicator displays different states: playing, paused, buffering, and error, each with a unique visual representation.\u003c/p\u003e\n"],["\u003cp\u003eThe progress indicator's color can be customized by app developers and OEMs, with OEM customizations taking precedence.\u003c/p\u003e\n"]]],[],null,["# Media progress indicator\n\n\u003cbr /\u003e\n\nThe media progress indicator component is unique to [media apps](/cars/design/automotive-os/apps/media/overview).\n\nThe progress indicator is a visual representation of the duration and elapsed playing time for a media source. It appears in media apps during playback.\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe media progress indicator consists of an inactive track (displayed in gray) that represents the duration of the media source, and an active track (displayed with an accent color) that overlays the inactive track to indicate elapsed playing time.\n1. Active track \n2. Inactive track \n\nThe media progress indicator can be **linear** or **circular**. \n\n\nThe linear progress indicator displays duration and elapsed time on a horizontal axis. The visible portion of the track is centered in a 76dp touch-target area. Tapping or dragging the elapsed time allows a user to move to different locations in the media source. The linear media progress indicator is intended for screens 800dp or taller. \n\nThe circular progress indicator displays duration and elapsed time as a circle. Tapping or dragging the elapsed time is not supported for moving to different locations. The circular media progress indicator is intended for screens less than 800dp tall, and for use when media playback controls are minimized.\n\n### Media progress indicator states\n\nDuring playback, the progress indicator is in one of four states:\n\n- **Playing:** Media is playing and the active track advances across the inactive track to indicate elapsed time.\n- **Paused:** The user paused playback. The active track is stationary at the point where playback is paused.\n- **Buffering:** The media app is loading content to play. The indicator displays a white line that repeatedly advances across the inactive track while content loads.\n- **Error:** Media cannot be played. There is no active track and the inactive track is disabled.\n\nPlaying state: The active track advances across the inactive track as media plays. Paused state: The active track is stationary while media playback is paused. \nBuffering state: A white line repeatedly advances across the inactive track while content loads. Error state: When a media error occurs, no active track is displayed and the inactive track is disabled.\n\n*** ** * ** ***\n\nSpecs\n-----\n\nLinear media progress indicator\n\nCircular media progress indicator\n\n*** ** * ** ***\n\nCustomization\n-------------\n\nDuring media playback, the media progress indicator's active track is displayed using an accent color. The default accent color is a shade of blue. App developers can choose to provide an app accent color that reflects their media brand instead. Similarly, OEMs can supply an accent color that reflects their car brand. If provided, an OEM accent color takes precedence over a an app's accent color.\nThe default styling for the progress indicator is a shade of blue. App developers can override the default app styling with their own brand's accent color (green in this example). OEMs, too, can override both the default and app styling with their own brand's accent color (orange in this example). Examples of default, app, and OEM accent color styling applied to a circular progress indicator\n\nThe [Car UI Library Integration Guide](https://source.android.com/devices/automotive/hmi/car_ui) provides OEM guidance for customizing components.\n\nFor specific guidance for using color to customize components, visit [Color](/cars/design/automotive-os/design-system/color).\n\n*** ** * ** ***\n\nExamples\n--------\n\nLinear media progress indicator in the media app playback view Here, the circular media progress indicator appears on the minimized playback control. The minimzed control overlays a playlist screen."]]
