JavaScript

function uuid() {
  var temp_url = URL.createObjectURL(new Blob());
  var uuid = temp_url.toString();
  URL.revokeObjectURL(temp_url);
  return uuid.substr(uuid.lastIndexOf('/') + 1); // remove prefix (e.g. blob:null/, blob:www.test.com/, ...)
}
function HSVtoRGB(t, e, i) {
            var r, n, a, s, o, h, l, p;
            switch (h = i * (1 - e), l = i * (1 - (o = 6 * t - (s = Math.floor(6 * t))) * e), p = i * (1 - (1 - o) * e), s % 6) {
                case 0:
                    r = i, n = p, a = h;
                    break;
                case 1:
                    r = l, n = i, a = h;
                    break;
                case 2:
                    r = h, n = i, a = p;
                    break;
                case 3:
                    r = h, n = l, a = i;
                    break;
                case 4:
                    r = p, n = h, a = i;
                    break;
                case 5:
                    r = i, n = h, a = l
            }
            return [r, n, a]
        }
function RGBtoHSV(t, e, i) {
            var r, n = Math.max(t, e, i),
                a = Math.min(t, e, i),
                s = n - a,
                o = 0 === n ? 0 : s / n,
                h = n / 255;
            switch (n) {
                case a:
                    r = 0;
                    break;
                case t:
                    r = e - i + s * (e < i ? 6 : 0), r /= 6 * s;
                    break;
                case e:
                    r = i - t + 2 * s, r /= 6 * s;
                    break;
                case i:
                    r = t - e + 4 * s, r /= 6 * s
            }
            return [r, o, h]
        }
function addSaturationToRGB(t, e) {
    var i = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]);
    return i[1] += e, 1 < i[1] ? i[1] = 1 : i[1] <= 0 && (i[1] = 0), HSVtoRGB(i[0], i[1], i[2])
}
function addBrightnessToRGB(t, e) {
    var i = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]);
    return i[2] += e, 1 < i[2] ? i[2] = 1 : i[2] < 0 && (i[2] = 0), HSVtoRGB(i[0], i[1], i[2])
}
function addHueToRGB(t, e) {
    var i = RGBtoHSV(255 * t[0], 255 * t[1], 255 * t[2]);
    return i[0] += e / 360, 1 < i[0] ? i[0] -= 1 : i[0] < 0 && (i[0] += 1), HSVtoRGB(i[0], i[1], i[2])
}
 var rgbToHex = function() {
            var t, e, i = [];
            for (t = 0; t < 256; t += 1) e = t.toString(16), i[t] = 1 == e.length ? "0" + e : e;
            return function(t, e, r) {
                return t < 0 && (t = 0), e < 0 && (e = 0), r < 0 && (r = 0), "#" + i[t] + i[e] + i[r]
            }
        }();
 <div class="preloader">
    
            <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background:0 0;transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);">
                <circle cx="50" cy="50" r="4.719" fill="none" stroke="#1d3f72" stroke-width="2">
                    <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="-1.5s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="-1.5s" repeatCount="indefinite"/>
                </circle><circle cx="50" cy="50" r="27.591" fill="none" stroke="#5699d2" stroke-width="2">
                    <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"/>
                </circle>
            </svg>
            
          </div>
     
     
     
 .preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: rgb(23, 22, 22);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: opacity 0.3s linear;
  }         
  
  
const preloader = document.querySelector('.preloader');

const fadeEffect = setInterval(() => {
  // if we don't set opacity 1 in CSS, then   //it will be equaled to "", that's why we   // check it
  if (!preloader.style.opacity) {
    preloader.style.opacity = 1;
  }
  if (preloader.style.opacity > 0) {
    preloader.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
      preloader.style.display="none";
  }
}, 200);

window.addEventListener('load', fadeEffect);
# Mac/Linux
find . -name "node_modules" -type d -prune -print | xargs du -chs

# Windows
FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" echo %d"
<head>
  <script src="svg-inject.min.js"></script>

  <!-- hide images until injection has completed or failed -->
  <style>
    /* hide all img elements until the svg is injected to prevent "unstyled image flash" */
    img.injectable {
      visibility: hidden;
    }
  </style>

  <script>
    SVGInject.setOptions({
      onFail: function(img, svg) {
        // if injection fails show the img element
        img.classList.remove('injectable');
      }
    });

    document.addEventListener('DOMContentLoaded', function() {
      // inject all img elements with class name `injectable`
      SVGInject(document.querySelectorAll('img.injectable'), {
        onAllFinish: function() {
          // the SVG injection has finished for all three images

        }
      });
    });
  </script>
</head>
<body>
  <img src="image_1.svg" class="injectable" />
  <img src="image_2.svg" class="injectable" />
  <img src="image_3.svg" class="injectable" />
</body>

Similiar Collections