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 ? -1 : 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

(function ($) {

            $.fn.loader = function (percent) {
                var $this = $(this);

                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;
                };


                //Create required markup
                var $pie_wrapper = $(this).data('loader-pie');
                if (!$pie_wrapper || $pie_wrapper.parent().length == 0) {
                    $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);
                }
                var $pie = $pie_wrapper.children().first();

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

                if (percent < 0) {
                    $pie.animate(
                            {
                                fontSize: size * 2
                            },
                            {
                                duration: 400,
                                step: function (fs) {
                                    $pie.css({
                                        position: 'absolute',
                                        left: ($pie_wrapper.width() / 2 - fs / 2) + 'px',
                                        top: ($pie_wrapper.height() / 2 - fs / 2) + 'px'
                                    });
                                },
                                complete: function () {
                                    $pie_wrapper.remove();
                                    $(this).removeData('loader-pie');
                                }
                            });
        ...