Skip to content
STYLESCAPE

Viewport

Examples for the ss-c-viewport module: a frame for a canvas that a library draws (three.js, an IFC or point-cloud viewer, a viewcube, a panorama or a tile viewer). The library renders into __canvas (or a direct canvas, iframe or video child); the frame sizes it and shows loading, progress and error states.

Loading

Set aria-busy="true" on the frame while the scene loads; the overlay fades in and out with it (instantly under reduced motion) and leaves the accessibility tree once hidden. A <progress> with __progress runs along the bottom edge.

Loading model… 42%
HTML 
<div class="ss-c-viewport" aria-busy="true" role="group" aria-label="Building model">
            <canvas class="ss-c-viewport__canvas" aria-hidden="true"></canvas>
            <div class="ss-c-viewport__loading" role="status">
                <span class="ss-c-spinner" aria-hidden="true"></span>
                <span>Loading model… 42%</span>
            </div>
            <progress class="ss-c-viewport__progress" max="100" value="42" aria-label="Model loaded"></progress>
        </div>

Ready, with a hint

Loading…

Drag to look around · Scroll to zoom

HTML 
<div class="ss-c-viewport ss-c-viewport--panorama" role="group" aria-label="Harbour panorama">
            <canvas class="ss-c-viewport__canvas" tabindex="0" aria-label="Panorama, drag to look around"></canvas>
            <div class="ss-c-viewport__loading" role="status"><span class="ss-c-spinner" aria-hidden="true"></span>Loading…</div>
            <p class="ss-c-viewport__hint">Drag to look around · Scroll to zoom</p>
        </div>

Error

__message covers the canvas whenever it's present; toggle it with hidden.

HTML 
<div class="ss-c-viewport ss-c-viewport--4x3" role="group" aria-label="Point cloud">
            <canvas class="ss-c-viewport__canvas" aria-hidden="true"></canvas>
            <div class="ss-c-viewport__message ss-c-viewport__message--error" role="alert">
                <p class="ss-c-viewport__title">The point cloud could not be loaded</p>
                <p>WebGL is turned off in this browser.</p>
                <button class="ss-c-button" type="button">Try again</button>
            </div>
        </div>

Aspect ratios and fill

16:9 by default; --square, --4x3, --wide (21:9) and --panorama (2:1). --fill drops the ratio, border and radius to fill a sized parent such as ss-l-app__main--bleed.

1:1

4:3

21:9

HTML 
<div class="ss-l-grid ss-l-grid-3 ss-l-grid-gap-md">
            <div class="ss-c-viewport ss-c-viewport--square" role="group" aria-label="Viewcube"><p class="ss-c-viewport__hint">1:1</p></div>
            <div class="ss-c-viewport ss-c-viewport--4x3" role="group" aria-label="Tiles"><p class="ss-c-viewport__hint">4:3</p></div>
            <div class="ss-c-viewport ss-c-viewport--wide" role="group" aria-label="Timeline scene"><p class="ss-c-viewport__hint">21:9</p></div>
        </div>