StringLoading

StringLoading is a global timing module. It does not bind to elements. After the configured timeout, it adds -loaded to document.documentElement.

Public API

Attributes

This module does not read any HTML activation attributes.

Settings

Setting	Type	Default	Real runtime effect
`timeout`	number	`900`	Delay in milliseconds before `-loaded` is added to `<html>`.

There is no string-timeout DOM attribute for this module.

CSS Variables and DOM Output

StringLoading writes one thing:

document.documentElement.classList.add('-loaded')

It does not write CSS variables or inline styles.

Events

This module does not emit public events.

Mirror Behavior

This module has no mirror output contract.

Quick Example

HTML

<div class="loading-demo">
  <div class="panel loading-panel">Loading</div>
  <div class="panel ready-panel">Ready</div>
</div>

CSS

.loading-demo {
  height: 50vh;
  display: grid;
  place-items: center;
}

.panel {
  min-width: 180px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid black;
  background: white;
  color: black;
}

.ready-panel {
  display: none;
}

html.-loaded .loading-panel {
  display: none;
}

html.-loaded .ready-panel {
  display: grid;
}

Registration

TypeScript

import StringTune, { StringLoading } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringLoading, { timeout: 900 });
stringTune.start(60);

Detailed Behavior

The class is added once, after the timeout expires.
The module does not remove -loaded later.
If you need transitions, write them in CSS against html.-loaded.