From time to time I need to throw together a small script to do something relatively simple. Today I had to write something that would animate a series of dots. You’ve seen it, those little lines of dots that grow and shrink to give indication that something, somewhere is happening.
It’s a relatively straight forward script, so I’ll just drop it in here with comments:
(function () { "use strict"; // Find #dots, run setDots every 500ms, define your dot, and set size limit var dots = document.getElementById("dots"), loop = setInterval(setDots, 500), _dot = ".", size = 3; function setDots () { // #dots will be truncated when limit is reached, otherwise grows by one dots.innerHTML = (dots.innerHTML.length >= size) ? _dot : (dots.innerHTML + _dot); } }());
It’s worth noting that you could probably whip up something similar with CSS alone using pseudo-elements, animation
, @keyframes
, and content
, or even animating a sprite’s location on a background. Of course browser support would be far more limited.
Well hello, Mr. Jonathan Sampson
I was looking for Jsonline at first, but soon found out that it is no longer available.
So i searched for “Jonathan Sampson” on Google and immediately found your site.
I will continue to visit your site, as I, and always have, love to learn from you.
Glad to see you doing so well.
take care,
and God bless.
-“es”-