This is a simple app shell for a PWA. It includes a navbar, two "screens" or "pages", and inlined styles to create a horizontal scrolling effect that snaps to each screen. A loader is also included. Each page initially renders a loader.
This is based on an app shell exercies from Building Performant Progressive Web Apps from Scratch by Jad Joubran.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <!-- instruct the page to match the screen's width using "device-independent" | |
| pixels. This will help the page to reflow content with more consistency on a variety of | |
| devices --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="edge" /> | |
| <title>App Title</title> | |
| <style> | |
| /* styles necessary to render the shell ONLY */ | |
| :root { | |
| --light-gray: #edeff5; | |
| --light-slate: #bbcce2; | |
| --dark-slate: #355a74; | |
| } | |
| /* basic resets */ | |
| body { | |
| margin: 0; | |
| /* | |
| changing the background color is important for UX because it | |
| lets the user know that the page is loading progressively | |
| */ | |
| background-color: var(--light-gray); | |
| /* | |
| use fonts that match the user's OS to create a more "native" user | |
| experience. These values are based on my casually searching of the | |
| internet. | |
| */ | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, | |
| /* safari, mac/ios, chrome */ "Segoe UI", Roboto, Oxygen, | |
| /* windows, android, kde (>=2019 ?) */ Ubuntu, Cantarell, "Fira Sans", | |
| /* Ubuntu, Gnome, Firefox OS */ "Droid Sans", "Helvetica Neue", | |
| sans-serif; /* older android */ | |
| } | |
| #navbar { | |
| height: 70px; | |
| background-color: white; | |
| box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); | |
| color: var(--dark-slate); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| font-size: 22px; | |
| } | |
| /* | |
| container for screens should fill the width and should scroll | |
| horizontally. Scrolling should only stop at the beginning (left) | |
| of each screen. There is a great article on scroll snapping | |
| at https://css-tricks.com/practical-css-scroll-snapping/. | |
| */ | |
| #screens { | |
| display: flex; | |
| width: 100vw; | |
| overflow-x: scroll; | |
| scroll-snap-type: x mandatory; | |
| } | |
| /* | |
| Each screen should fill the entire screen width and take up the | |
| remaining screen height after subtracting the height of the navbar. | |
| Each screen should align at the start (left) for scroll snapping. | |
| */ | |
| .screen { | |
| flex: 0 0 100vw; | |
| min-height: calc(100vh - 70px); | |
| scroll-snap-align: start; | |
| } | |
| /* | |
| css loader by w3schools https://www.w3schools.com/howto/howto_css_loader.asp | |
| */ | |
| .loader { | |
| border: 12px solid white; /* Light grey */ | |
| border-top: 12px solid var(--dark-slate); /* Blue */ | |
| border-radius: 50%; | |
| width: 5em; | |
| height: 5em; | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* use the loader container to center the loader */ | |
| .loader-container { | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav id="navbar">Title</nav> | |
| <main id="screens"> | |
| <div class="screen"> | |
| <div class="loader-container"> | |
| <div class="loader"></div> | |
| </div> | |
| </div> | |
| <div class="screen"> | |
| <div class="loader-container"> | |
| <div class="loader"></div> | |
| </div> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |