JSFiddle - React, Tailwind, and code Playground

by ideatic

HTML

<script>
        var interval;
        function animate() {
            var progress = 0;
            if (interval)
                clearInterval(interval);

            interval = setInterval(function () {
                $('.animated').loader(progress == 101 ? false : progress);
                progress++;
                if (progress > 101) {
                    clearInterval(interval);
                }
            }, 50);
        }
        ;
    </script>

<div style="text-align: center;margin-top: 250px">
<div class="animated">
    <img alt=""
        ...

CSS

.animated {
            /*    -webkit-filter: brightness(0.25); */

        }

        .loader-pie {
            background: rgba(0, 0, 0, .7);
        }

JavaScript

/**
 * jQuery Loader Pie Plugin
 */
(function ($) {

    $.fn.loader = function (progress) {

        var add_prefixes = function (styles, properties) {
            for (var name in properties) {
                var value = properties[name];

                $(['-moz', '-ms', '-o', '-webkit']).each(function () {
                    styles[this + '-' + name] = value;
                });
            }
            return styles;
        };

        var center = function ($elm) {
            $elm.css({
                position: 'absolute',
                left: ($elm.parent().width() / 2 - $elm.width() / 2) + 'px',
                top: ($elm.parent().height() / 2 - $elm.height() / 2) + 'px'
            });
        }
        return $(this).each(function () {
            var $this = $(this);


            //Create required markup
            var $pie_wrapper = $this.data('loader-pie');
            var intervalId;
            var firstRun = false;
            if (!$pie_wrapper || $pie_wrapper.parent().length == 0) {
                firstRun = true;
                $pie_wrapper = $('<div><div><div><div class="loader-pie"></div></div><div class="loader-pie"></div></div></div>').prependTo($this);
                $this.data('loader-pie', $pie_wrapper);

                //Detect element resize
                var lastSize = {
                    w: $this.width(),
                    h: $this.height()
                };
                intervalId = setInterval(function () {
                    if ($this.width() !== lastSize.w || $this.height() !== lastSize.h) {
                        lastSize.w = $this.width();
                        lastSize.h = $this.height();
                        $this.loader($this.data('loader-progress'));
                    }
                }, 200);
            }
            $this.data('loader-progress', progress);
            var $pie = $pie_wrapper.children().first();

            var size = Math.min($this.width(), $this.height());
           ...