Loading… (with blinking dots)

index.html

<div class="loader">Loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></div>

loading-with-blinking-dots.markdown

Loading… (with blinking dots)

Super simple, pure CSS, progressively enhanced loader with blinking ellipsis dots.

A Pen by Chris Nager on CodePen.

License.

style.css

@keyframes blink {50% { color: transparent }}
.loader__dot { animation: 1s blink infinite }
.loader__dot:nth-child(2) { animation-delay: 250ms }
.loader__dot:nth-child(3) { animation-delay: 500ms }