vue-content-loader/dist/vue-content-loader.umd.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.contentLoaders = {}, global.vue));
}(this, (function (exports, vue) { 'use strict';

  var uid = (function () {
    return Math.random().toString(36).substring(2);
  });

  var ContentLoader = function ContentLoader(props, _ref) {
    var attrs = _ref.attrs,
        slots = _ref.slots;
    var idClip = props.uniqueKey ? props.uniqueKey + "-idClip" : uid();
    var idGradient = props.uniqueKey ? props.uniqueKey + "-idGradient" : uid();
    return vue.createVNode("svg", vue.mergeProps(attrs, {
      "viewBox": "0 0 " + props.width + " " + props.height,
      "version": "1.1",
      "preserveAspectRatio": props.preserveAspectRatio
    }), [vue.createVNode("rect", {
      "style": {
        fill: "url(" + props.baseUrl + "#" + idGradient + ")"
      },
      "clip-path": "url(" + props.baseUrl + "#" + idClip + ")",
      "x": "0",
      "y": "0",
      "width": props.width,
      "height": props.height
    }, null), vue.createVNode("defs", null, [vue.createVNode("clipPath", {
      "id": idClip
    }, [slots["default"] ? slots["default"]() : vue.createVNode("rect", {
      "x": "0",
      "y": "0",
      "rx": "5",
      "ry": "5",
      "width": props.width,
      "height": props.height
    }, null)]), vue.createVNode("linearGradient", {
      "id": idGradient
    }, [vue.createVNode("stop", {
      "offset": "0%",
      "stop-color": props.primaryColor,
      "stop-opacity": props.primaryOpacity
    }, [props.animate ? vue.createVNode("animate", {
      "attributeName": "offset",
      "values": "-2; 1",
      "dur": props.speed + "s",
      "repeatCount": "indefinite"
    }, null) : null]), vue.createVNode("stop", {
      "offset": "50%",
      "stop-color": props.secondaryColor,
      "stop-opacity": props.secondaryOpacity
    }, [props.animate ? vue.createVNode("animate", {
      "attributeName": "offset",
      "values": "-1.5; 1.5",
      "dur": props.speed + "s",
      "repeatCount": "indefinite"
    }, null) : null]), vue.createVNode("stop", {
      "offset": "100%",
      "stop-color": props.primaryColor,
      "stop-opacity": props.primaryOpacity
    }, [props.animate ? vue.createVNode("animate", {
      "attributeName": "offset",
      "values": "-1; 2",
      "dur": props.speed + "s",
      "repeatCount": "indefinite"
    }, null) : null])])])]);
  };

  ContentLoader.props = {
    width: {
      type: [Number, String],
      "default": 400
    },
    height: {
      type: [Number, String],
      "default": 130
    },
    speed: {
      type: Number,
      "default": 2
    },
    preserveAspectRatio: {
      type: String,
      "default": 'xMidYMid meet'
    },
    baseUrl: {
      type: String,
      "default": ''
    },
    primaryColor: {
      type: String,
      "default": '#f9f9f9'
    },
    secondaryColor: {
      type: String,
      "default": '#ecebeb'
    },
    primaryOpacity: {
      type: Number,
      "default": 1
    },
    secondaryOpacity: {
      type: Number,
      "default": 1
    },
    uniqueKey: {
      type: String
    },
    animate: {
      type: Boolean,
      "default": true
    }
  };

  var BulletListLoader = function BulletListLoader(props, _ref) {
    var attrs = _ref.attrs;
    return vue.createVNode(ContentLoader, attrs, {
      "default": function _default() {
        return [vue.createVNode("circle", {
          "cx": "10",
          "cy": "20",
          "r": "8"
        }, null), vue.createVNode("rect", {
          "x": "25",
          "y": "15",
          "rx": "5",
          "ry": "5",
          "width": "220",
          "height": "10"
        }, null), vue.createVNode("circle", {
          "cx": "10",
          "cy": "50",
          "r": "8"
        }, null), vue.createVNode("rect", {
          "x": "25",
          "y": "45",
          "rx": "5",
          "ry": "5",
          "width": "220",
          "height": "10"
        }, null), vue.createVNode("circle", {
          "cx": "10",
          "cy": "80",
          "r": "8"
        }, null), vue.createVNode("rect", {
          "x": "25",
          "y": "75",
          "rx": "5",
          "ry": "5",
          "width": "220",
          "height": "10"
        }, null), vue.createVNode("circle", {
          "cx": "10",
          "cy": "110",
          "r": "8"
        }, null), vue.createVNode("rect", {
          "x": "25",
          "y": "105",
          "rx": "5",
          "ry": "5",
          "width": "220",
          "height": "10"
        }, null)];
      }
    });
  };

  var CodeLoader = function CodeLoader(props, _ref) {
    var attrs = _ref.attrs;
    return vue.createVNode(ContentLoader, attrs, {
      "default": function _default() {
        return [vue.createVNode("rect", {
          "x": "0",
          "y": "0",
          "rx": "3",
          "ry": "3",
          "width": "70",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "80",
          "y": "0",
          "rx": "3",
          "ry": "3",
          "width": "100",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "190",
          "y": "0",
          "rx": "3",
          "ry": "3",
          "width": "10",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "15",
          "y": "20",
          "rx": "3",
          "ry": "3",
          "width": "130",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "155",
          "y": "20",
          "rx": "3",
          "ry": "3",
          "width": "130",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "15",
          "y": "40",
          "rx": "3",
          "ry": "3",
          "width": "90",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "115",
          "y": "40",
          "rx": "3",
          "ry": "3",
          "width": "60",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "185",
          "y": "40",
          "rx": "3",
          "ry": "3",
          "width": "60",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "60",
          "rx": "3",
          "ry": "3",
          "width": "30",
          "height": "10"
        }, null)];
      }
    });
  };

  var FacebookLoader = function FacebookLoader(props, _ref) {
    var attrs = _ref.attrs;
    return vue.createVNode(ContentLoader, attrs, {
      "default": function _default() {
        return [vue.createVNode("rect", {
          "x": "70",
          "y": "15",
          "rx": "4",
          "ry": "4",
          "width": "117",
          "height": "6.4"
        }, null), vue.createVNode("rect", {
          "x": "70",
          "y": "35",
          "rx": "3",
          "ry": "3",
          "width": "85",
          "height": "6.4"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "80",
          "rx": "3",
          "ry": "3",
          "width": "350",
          "height": "6.4"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "100",
          "rx": "3",
          "ry": "3",
          "width": "380",
          "height": "6.4"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "120",
          "rx": "3",
          "ry": "3",
          "width": "201",
          "height": "6.4"
        }, null), vue.createVNode("circle", {
          "cx": "30",
          "cy": "30",
          "r": "30"
        }, null)];
      }
    });
  };

  var ListLoader = function ListLoader(props, _ref) {
    var attrs = _ref.attrs;
    return vue.createVNode(ContentLoader, attrs, {
      "default": function _default() {
        return [vue.createVNode("rect", {
          "x": "0",
          "y": "0",
          "rx": "3",
          "ry": "3",
          "width": "250",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "20",
          "y": "20",
          "rx": "3",
          "ry": "3",
          "width": "220",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "20",
          "y": "40",
          "rx": "3",
          "ry": "3",
          "width": "170",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "60",
          "rx": "3",
          "ry": "3",
          "width": "250",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "20",
          "y": "80",
          "rx": "3",
          "ry": "3",
          "width": "200",
          "height": "10"
        }, null), vue.createVNode("rect", {
          "x": "20",
          "y": "100",
          "rx": "3",
          "ry": "3",
          "width": "80",
          "height": "10"
        }, null)];
      }
    });
  };

  var InstagramLoader = function InstagramLoader(props, _ref) {
    var attrs = _ref.attrs;
    return vue.createVNode(ContentLoader, vue.mergeProps(attrs, {
      "height": 480
    }), {
      "default": function _default() {
        return [vue.createVNode("circle", {
          "cx": "30",
          "cy": "30",
          "r": "30"
        }, null), vue.createVNode("rect", {
          "x": "75",
          "y": "13",
          "rx": "4",
          "ry": "4",
          "width": "100",
          "height": "13"
        }, null), vue.createVNode("rect", {
          "x": "75",
          "y": "37",
          "rx": "4",
          "ry": "4",
          "width": "50",
          "height": "8"
        }, null), vue.createVNode("rect", {
          "x": "0",
          "y": "70",
          "rx": "5",
          "ry": "5",
          "width": "400",
          "height": "400"
        }, null)];
      }
    });
  };

  exports.BulletListLoader = BulletListLoader;
  exports.CodeLoader = CodeLoader;
  exports.ContentLoader = ContentLoader;
  exports.FacebookLoader = FacebookLoader;
  exports.InstagramLoader = InstagramLoader;
  exports.ListLoader = ListLoader;

  Object.defineProperty(exports, '__esModule', { value: true });

})));