Skip to main content

Loading State Ready

This template shows how to build a simple responsive loading state using Duet’s components. Please note that the example below does not represent a real use case.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.

Open in new window
<!DOCTYPE html>
<html class="duet-bg-gradient duet-sticky-footer" lang="fi">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-MBQw32OayI0LEHzdAdgAXsydek8g7Wyf/P0xIwjwRwDLIdj0TSDBwW1PeG0v8qgM" crossorigin="anonymous" />
<link rel="stylesheet" href="" integrity="sha384-bdxOmb87eo3bfxU+AHyrr4fo/iBSqSRZs4tIRaXT/e/8FCLFnV3mcABYDi1/CNQU" crossorigin="anonymous" />
<script type="module" src="" integrity="sha384-j6DJZKfhR5wl9zwEvm1UGvqzjzuCFFQVQDwK4Q9ZncTV2VpigPRCVMm/hukN4EnN" crossorigin="anonymous"></script>
<script nomodule src="" integrity="sha384-lL0ez8obHTHkJkOm2hkTEia6M0KYqtXIiWT0knLNRJrL/p7aBuXd/egg0KkcKT8c" crossorigin="anonymous"></script>
/* You can remove the style block if you only need one theme. */
duet-spinner {
color: var(--color-primary);
.duet-theme-turva duet-spinner {
color: var(--color-primary-turva);
<duet-layout center middle>
<div slot="main">
<duet-heading level="h1">Ladataan sisältöä…</duet-heading>
<span class="msg" aria-live="assertive"></span>
<duet-spinner size="large" color="currentColor"></duet-spinner>
{ "label": "Turvallisuus ja käyttöehdot", "href": "#" },
{ "label": "Evästeet", "href": "#" },
{ "label": "Henkilötietojen käsittely", "href": "#" }

// Announce to screen reader users that we’re loading content
setTimeout(function() {
document.querySelector(".msg").innerHTML = "Ladataan sisältöä, odota hetki."
}, 500)


To install this template’s dependencies into your project, run:

npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts

For further guidelines, please see each package’s documentation.


Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:


Building Layouts


Using CLI Tools


Creating Custom Patterns


Server Side Rendering


Sharing Prototypes


Usage With Markdown


If you experience any issues while using a template, please head over to the Support page for more guidelines and help.