❤ 💻 JavaScript - how to create custom animated loader?

11 points

In JavaScript it is possible to create simple animated loader in following way.

1. JavaScriopt loader in single file example

Note: this source code has been splitted in to separated files in second example to make it easier to read.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
  
    .loadable-content {
        position: relative;
    }

    .content-cover {
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 1000000;
    }

    .content-loader {
        margin: -55px 0 0 -55px;
        position: absolute;
        left: 50%; top: 50%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        width: 110px; height: 110px;
    }

    .content-loader-item {
        position: absolute;
        left: 45px; top: 45px;
        border-radius: 50%;
        background: silver;
        width: 20px; height: 20px;
        color: red;
    }

    .content-loader-item:nth-child(1) {
        transform: rotate(0deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.125s linear;
    }

    .content-loader-item:nth-child(2) {
        transform: rotate(45deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.250s linear;
    }

    .content-loader-item:nth-child(3) {
        transform: rotate(90deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.375s linear;
    }

    .content-loader-item:nth-child(4) {
        transform: rotate(135deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.500s linear;
    }

    .content-loader-item:nth-child(5) {
        transform: rotate(180deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.625s linear;
    }

    .content-loader-item:nth-child(6) {
        transform: rotate(225deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.750s linear;
    }

    .content-loader-item:nth-child(7) {
        transform: rotate(270deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 0.875s linear;
    }

    .content-loader-item:nth-child(8) {
        transform: rotate(315deg) translate(0, 40px);
        animation: content-loader-item-animation infinite 2s 1.000s linear;
    }

    @keyframes content-loader-item-animation {
        0.0% {
            background: #b5b5b5;
        }

        20.0% {
            background: #808080;
        }

        25.0% {
            background: #c0c0c0;
        }

        100.0% {
            background: #c0c0c0;
        }
    }
  
  </style>
  <script>
  
    'use strict';

    (function(window) {
        window.Loader = function() {
            var container = document.createElement('div');

            container.innerHTML = '' +
                '<div class="content-cover">\n' +
                '    <div class="content-loader">\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '        <div class="content-loader-item"></div>\n' +
                '    </div>\n' +
                '</div>';

            var element = container.firstChild;

            this.show = function(parent, placeholder) {
                parent.insertBefore(element, placeholder);
            };

            this.hide = function() {
                var parent = element.parentNode;

                if(parent) {
                    parent.removeChild(element);
                }
            };
        };
    })(window);
    
  </script>
</head>
<body>
  <style>
  
    #container {
      border: 1px solid red; 
      height: 150px;
    }
  
  </style>
  
  <div id="container" class="loadable-content">
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...
  </div>

  <br />
  
  <div>
    <button onclick="turnOnLoader()">Turn ON loader</button>
    <button onclick="turnOffLoader()">Turn OFF loader</button>
  </div>
  
  <script>

   	var container = document.querySelector('#container');
    var loader = new Loader();

    function turnOnLoader() {
        loader.show(container);
    }

    function turnOffLoader() {
        loader.hide();
    }

  </script>
</body>
</html>

2. JavaScriopt loader in separated files example

index.htm file:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="loader.css" />
  <script src="loader.js"></script>
</head>
<body>
  <style>
  
    #container {
      border: 1px solid red; 
      height: 150px;
    }
  
  </style>

  <div id="container" class="loadable-content">
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...<br />
      This is some text...
  </div>

  <br />

  <div>
    <button onclick="turnOnLoader()">Turn ON loader</button>
    <button onclick="turnOffLoader()">Turn OFF loader</button>
  </div>

  <script>

    var container = document.querySelector('#container');
    var loader = new Loader();

    function turnOnLoader() {
        loader.show(container);
    }

    function turnOffLoader() {
        loader.hide();
    }

  </script>
</body>
</html>

Result:

loader.js file:

'use strict';

(function(window) {
    window.Loader = function() {
        var container = document.createElement('div');

        container.innerHTML = '' +
            '<div class="content-cover">\n' +
            '    <div class="content-loader">\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '        <div class="content-loader-item"></div>\n' +
            '    </div>\n' +
            '</div>';

        var element = container.firstChild;

        this.show = function(parent, placeholder) {
            parent.insertBefore(element, placeholder);
        };

        this.hide = function() {
            var parent = element.parentNode;

            if(parent) {
                parent.removeChild(element);
            }
        };
    };
})(window);

loader.css file:


.loadable-content {
    position: relative;
}

.content-cover {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000000;
}

.content-loader {
    margin: -55px 0 0 -55px;
    position: absolute;
    left: 50%; top: 50%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    width: 110px; height: 110px;
}

.content-loader-item {
    position: absolute;
    left: 45px; top: 45px;
    border-radius: 50%;
    background: silver;
    width: 20px; height: 20px;
    color: red;
}

.content-loader-item:nth-child(1) {
    transform: rotate(0deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.125s linear;
}

.content-loader-item:nth-child(2) {
    transform: rotate(45deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.250s linear;
}

.content-loader-item:nth-child(3) {
    transform: rotate(90deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.375s linear;
}

.content-loader-item:nth-child(4) {
    transform: rotate(135deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.500s linear;
}

.content-loader-item:nth-child(5) {
    transform: rotate(180deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.625s linear;
}

.content-loader-item:nth-child(6) {
    transform: rotate(225deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.750s linear;
}

.content-loader-item:nth-child(7) {
    transform: rotate(270deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 0.875s linear;
}

.content-loader-item:nth-child(8) {
    transform: rotate(315deg) translate(0, 40px);
    animation: content-loader-item-animation infinite 2s 1.000s linear;
}

@keyframes content-loader-item-animation {
    0.0% {
        background: #b5b5b5;
    }

    20.0% {
        background: #808080;
    }

    25.0% {
        background: #c0c0c0;
    }

    100.0% {
        background: #c0c0c0;
    }
}

JavaScript - how to create custom animated loader?

1. JavaScriopt loader in single file example

2. JavaScriopt loader in separated files example

Suggested wiki articles:

Suggested findings