Customized loading animation (not your average GIF)

Question

Customized loading animation (not your average GIF)

There are numerous websites on the internet where you can customize a loading GIF, but I was curious if there is another way to create custom text for loading animations without using Adobe software.

Instead of the common spinner, I am interested in specifying text that animates while an image loads.

I have searched extensively and have not found a solution. The closest I found was a jQuery spinner, but it's not what I'm looking for.

Have any of you encountered this before? If so, how did you customize it?

For example:

Sometimes you might see the following animated as a GIF:

L......

LO.....

LOA....

LOAD...

LOADI..

LOADIN.

LOADING

The above animation is created by looping through different frames, but I wonder if there is a more modern method to create custom loading messages, possibly using jQuery or other technologies instead of Flash.

jquery css animated

Answer 1

Answer №1

Is this similar to what you're looking for?

var $ld = $('#loading-container');
var count = 1;
var text = "Loading...";
var loadingAnimation = setInterval(function(){
    $ld.text(text.substr(0, count));
    count++;
    if (count > text.length)
        count = 1;
}, 100);

Make sure to include clearTimeout(loadingAnimation) when finished.

See demo here: http://www.example.com/demo123

Answer 2

Is this similar to what you're looking for?

var $ld = $('#loading-container');
var count = 1;
var text = "Loading...";
var loadingAnimation = setInterval(function(){
    $ld.text(text.substr(0, count));
    count++;
    if (count > text.length)
        count = 1;
}, 100);

Make sure to include clearTimeout(loadingAnimation) when finished.

See demo here: http://www.example.com/demo123

Answer 3

Answer №2

Avoiding the use of jQuery:

<div id="loading"></div>

.

function loadingContent(element, string, time) {
    const timeout = 200; // milliseconds
    if (arguments.length == 2) time = string;
    switch (string) {
        case '':
            element.innerHTML = '';
            loadingContent(element, time, time);
            break;
        default:
            element.innerHTML += string.charAt(0);
            setTimeout(function() {
                loadingContent(element, string.substr(1), time);
            }, timeout);
    }
}

loadingContent(document.getElementById('loading'), 'NOW LOADING...');

http://jsfiddle.net/SHiNKiROU/Su2hy/

UPDATE: Implementing dots padding for the loading message

<div id="loading" style="font-family: monospace;"></div>

.

function addDotsPadding(element, string) {
        const timeout = 200; // milliseconds
        var index = 0;

        function displayTextWithDots(i) {
            var textToShow = '';
            for (var j = 0; j <= i; j++) {
                textToShow += string.charAt(j);
            }
            for (var j = i + 1; j < string.length; j ++) {
                textToShow += '.';
            }
            element.innerHTML = textToShow;
        }
        return setInterval(function() {
            displayTextWithDots(index++);
            if (index == string.length) index = 0;
        }, timeout);
}

var interval = addDotsPadding(document.getElementById('loading'), 'LOADING');
// clearInterval(interval); when loading is complete

http://jsfiddle.net/SHiNKiROU/Su2hy/9/

Answer 4

Avoiding the use of jQuery:

<div id="loading"></div>

.

function loadingContent(element, string, time) {
    const timeout = 200; // milliseconds
    if (arguments.length == 2) time = string;
    switch (string) {
        case '':
            element.innerHTML = '';
            loadingContent(element, time, time);
            break;
        default:
            element.innerHTML += string.charAt(0);
            setTimeout(function() {
                loadingContent(element, string.substr(1), time);
            }, timeout);
    }
}

loadingContent(document.getElementById('loading'), 'NOW LOADING...');

http://jsfiddle.net/SHiNKiROU/Su2hy/

UPDATE: Implementing dots padding for the loading message

<div id="loading" style="font-family: monospace;"></div>

.

function addDotsPadding(element, string) {
        const timeout = 200; // milliseconds
        var index = 0;

        function displayTextWithDots(i) {
            var textToShow = '';
            for (var j = 0; j <= i; j++) {
                textToShow += string.charAt(j);
            }
            for (var j = i + 1; j < string.length; j ++) {
                textToShow += '.';
            }
            element.innerHTML = textToShow;
        }
        return setInterval(function() {
            displayTextWithDots(index++);
            if (index == string.length) index = 0;
        }, timeout);
}

var interval = addDotsPadding(document.getElementById('loading'), 'LOADING');
// clearInterval(interval); when loading is complete

http://jsfiddle.net/SHiNKiROU/Su2hy/9/

Answer 5

Answer №3

Check out the jQuery plugin featured on CSS-Tricks for loading dots.

Answer 6

Check out the jQuery plugin featured on CSS-Tricks for loading dots.

Customized loading animation (not your average GIF)

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible for PHP to use the set cookie function to replace the cookie value set by JQuery cookie?

Send the data from the table to the controller

CSS: Targeting a particular instance of a specific element type within an HTML document

How can we use jQuery to change the format of a

Is it possible to merge two HTML selectors using jQuery?

Enhance Your Page with a Widget Using Bootstrap

Comparing the Usage of Forward Slash [/] and Space in CSS

Triggering JavaScript events using jQuery

What is the best method for making recursive ajax calls until a specific condition is met?

Utilizing a jQuery hint plugin with ASP.NET MVC3's client-side validation feature

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

A guide on transforming a string into an object and utilizing it

How can you make a dropdown button interactive and display a list simultaneously?

Sending PHP variables to jQuery AJAX in a separate script-file

Submitting an ajax form with the use of the symbol '&'

AmCharts Axis renderer mistakenly renders an additional grid line

Please select the links located beneath the see-through triangular or polygonal shapes

Can Masonry.js content be perfectly centered?

How can I deactivate a specific range without altering the appearance with Bootstrap 5?

The `val()` method in jQuery does not retrieve the value from every input field