# Greeting Loader

> A minimal dark loading screen that cycles a greeting through several languages with a soft fade.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/greeting-loader/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<div class='gl'><span class='gl-w' id='glw'>Hello</span></div>
```

`styles.css`

```css
.gl{display:grid;place-items:center;min-height:200px;width:100%;background:#000;color:#fff;font-family:'Helvetica Neue',Arial,sans-serif}.gl-w{font-size:28px;font-weight:300;letter-spacing:.02em;transition:opacity .6s ease,transform .6s ease}.gl-w.out{opacity:0;transform:translateY(6px) scale(.98)}
```

`script.js`

```js
const w=document.getElementById('glw');const L=['Hello','Hola','Bonjour','Ciao','Hallo','Namaste','こんにちは','안녕하세요'];let i=0;setInterval(()=>{w.classList.add('out');setTimeout(()=>{i=(i+1)%L.length;w.textContent=L[i];w.classList.remove('out')},600)},2200);
```

## About

A calm splash loader. The greeting fades out and in on a loop, one language at a time. Drop it into any full-screen loading state.

---
Also available as JSON: https://ownlyplans.com/bhaskar/greeting-loader/?format=json
MCP server: https://ownlyplans.com/mcp