webdevpuneet.com

Related Snippets

57 in Mobile Screens category
51–56 of 57

Mobile Status Bar

Mobile Onboarding Screens

Mobile Login Screen

Mobile Lock Screen

Story Progress Bars

Swipe to Delete List

Mobile Status Bar — Free iOS Status Bar UI Snippet

Mobile Status Bar · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsSVGDashboard UIMobile UI

Copy & paste

Source Code

<div class="sb-wrap">
  <div class="sb-demo" id="sbDemo">
    <div class="sb-bar">
      <div class="sb-left">
        <span class="sb-time" id="sbTime">9:41</span>
      </div>
      <div class="sb-notch"></div>
      <div class="sb-right">
        <svg class="sb-signal" viewBox="0 0 20 12" width="18"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="6" width="3" height="6" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
        <svg class="sb-wifi" viewBox="0 0 18 14" width="17"><path d="M9 13.2 1.4 5.6a11 11 0 0 1 15.2 0z" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="9" cy="10.6" r="1.5"/></svg>
        <span class="sb-pct" id="sbPct">84%</span>
        <span class="sb-batt"><i id="sbFill"></i></span>
      </div>
    </div>
    <div class="sb-page">
      <h3>Screen content</h3>
      <p>The status bar sits flush at the top of any screen. Toggle the theme to see it adapt.</p>
    </div>
  </div>
  <div class="sb-controls">
    <button type="button" id="sbTheme">Toggle dark</button>
    <button type="button" id="sbNotch">Toggle notch</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS/SVG icons
Signal, wifi, and battery with no icon font.
currentColor theming
Icons invert automatically with the theme.
Live clock
12-hour time updated on an interval.
Real battery
Reads device charge via the Battery API.
Toggleable notch
Slide-and-fade between notch and flat top.
Light/dark
A single class restyles the whole bar.
Flush header
Designed to sit atop any screen.
No dependency
Pure HTML/CSS/JS, self-contained.

About this UI Snippet

Mobile Status Bar — Reusable iOS-Style Top Bar

Screenshot of the Mobile Status Bar snippet rendered live

A mobile status bar is the thin strip at the top of every phone screen — time on the left; signal, wifi, and battery on the right — that app mockups and design systems need to look authentic. This snippet is a reusable, themeable status bar drawn entirely in HTML and CSS, with a live clock, real battery reading, an optional notch, and light/dark modes, in vanilla JavaScript with no dependency.

Icons drawn in CSS and SVG, not a font

The signal is four <rect>s of rising height in a tiny inline SVG; the wifi is a stroked arc with a dot; the battery is a bordered box with a nub ::after and an inner fill bar. Every glyph uses currentColor, so the whole bar inverts automatically when the theme flips — no separate dark-mode icon set. Building them inline keeps the component self-contained with no icon dependency.

A live clock and real battery

A tick() interval keeps the time current in 12-hour format. Where the browser supports it, navigator.getBattery() reads the actual device charge and updates the percentage and fill on levelchange, so the mockup reflects reality; it degrades gracefully to the default value where the API is unavailable.

The notch as a toggle

The notch is a single black pill anchored to the top center with bottom-rounded corners. A .no-notch class slides it up and fades it out via transitions, letting you switch between notched and flat-top devices — useful when one design system targets multiple phones. Because it's absolutely positioned, it overlays the bar without affecting layout.

Theming with one class

Light and dark are a single .dark class on the container; since text and icons are currentColor and backgrounds use the theme, flipping the class restyles the entire bar and the demo page beneath it. This mirrors how you'd drive a real app's status-bar style from the active theme.

Reusing it as a header

The status bar is built to sit flush atop any screen. Drop it above your content (or inside a phone mockup) and it provides the device chrome for free. Keep it as a component and pass a theme prop, and every screen in your design — login, onboarding, dashboard — gets a consistent, live top bar.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA status bar renders flush above a demo screen.
  2. 2
    Watch the clockThe time updates live in 12-hour format.
  3. 3
    See the batteryWhere supported, it reads the real device charge.
  4. 4
    Toggle dark modeOne class flips the bar and page to a dark theme.
  5. 5
    Toggle the notchSwitch between notched and flat-top devices.
  6. 6
    Reuse itPlace it atop any screen as device chrome.

Real-world uses

Common Use Cases

Mockup chrome
Top off any screen inside a phone mockup with a live 12-hour clock, signal, wifi and battery drawn from CSS and SVG.
Design system components
Share one reusable bar across a mobile login screen and every other app concept, so mockups look consistent.
Lock and onboarding screens
Place it above a mobile lock screen, where currentColor makes every icon invert automatically with light and dark themes.
Theme demonstrations
Show light and dark variants beside a colour mode toggle, keeping the notch and icons legible in each.
Real battery readout
Read device charge through the Battery API and pair with a battery indicator for a larger view of the same value.
Related: Mobile Notifications Screen
See the Mobile Notifications Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No — they're inline SVG and CSS. The signal is four rising rects, the wifi is a stroked arc with a dot, and the battery is a bordered box with a nub pseudo-element and a fill bar. All use currentColor, so they recolor with the text and invert in dark mode without a separate icon set.

Where the browser supports navigator.getBattery(), yes — it reads the actual charge, sets the percentage and fill width, and listens for levelchange to stay current. In contexts without the API it simply keeps the default value, so it never breaks; it just falls back to a static level.

The notch is one black pill positioned at the top center with bottom-rounded corners and a high stacking order, so it overlays the bar without affecting layout. A no-notch class translates it up and fades it via CSS transitions, letting you switch between notched and flat-top device styles instantly.

A single dark class on the container. Because the icons and text use currentColor and the backgrounds reference the theme, toggling that one class restyles the entire bar and the demo page beneath it — the same way you'd switch a real app's status-bar appearance based on the active theme.

Make it a component with a theme prop that sets the dark class and a notch boolean. Put the clock interval and the getBattery subscription in a mount effect with cleanup. Render it at the top of each screen as shared chrome. In Tailwind, lay out the bar with flex justify-between and build the icons as small inline SVGs using currentColor.