zmp-vue/cjs/zalo-ui-kits/preloader.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _hoisted_1 = {
  key: 0,
  class: "ring-spinner"
};

var _hoisted_2 = /*#__PURE__*/(0, _vue.createVNode)("div", {
  class: "ball-holder"
}, [/*#__PURE__*/(0, _vue.createVNode)("div", {
  class: "ball"
})], -1);

var _hoisted_3 = {
  key: 1,
  class: "spinner",
  viewBox: "0 0 66 66",
  xmlns: "http://www.w3.org/2000/svg"
};

var _hoisted_4 = /*#__PURE__*/(0, _vue.createVNode)("stop", {
  offset: "20%",
  "stop-opacity": "1"
}, null, -1);

var _hoisted_5 = /*#__PURE__*/(0, _vue.createVNode)("stop", {
  offset: "50%",
  "stop-opacity": ".5"
}, null, -1);

var _hoisted_6 = /*#__PURE__*/(0, _vue.createVNode)("stop", {
  offset: "100%",
  "stop-opacity": "0"
}, null, -1);

var _hoisted_7 = /*#__PURE__*/(0, _vue.createVNode)("svg", {
  class: "spinner-dot dot",
  width: "5",
  height: "5",
  viewBox: "0 0 66 66",
  xmlns: "http://www.w3.org/2000/svg",
  x: "39",
  y: "1.7"
}, [/*#__PURE__*/(0, _vue.createVNode)("circle", {
  class: "dot-path",
  cx: "33",
  cy: "33",
  r: "30"
})], -1);

var _hoisted_8 = {
  key: 2,
  class: "preloader-logo-container"
};

function render(_ctx, _cache) {
  return (0, _vue.openBlock)(), (0, _vue.createBlock)("span", {
    class: ["zmp-preloader", {
      'preloader-with-logo': _ctx.logo
    }],
    style: _ctx.size ? {
      width: _ctx.size,
      height: _ctx.size,
      '--zmp-preloader-size': _ctx.size
    } : {}
  }, [_ctx.logo ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_1, [_hoisted_2])) : ((0, _vue.openBlock)(), (0, _vue.createBlock)("svg", _hoisted_3, [(0, _vue.createVNode)("circle", {
    class: "spinner-path",
    fill: "transparent",
    cx: "33",
    cy: "33",
    r: "30",
    "stroke-width": "5",
    stroke: "url(#gradient-" + _ctx.id + ")"
  }, null, 8, ["stroke"]), (0, _vue.createVNode)("linearGradient", {
    id: "gradient-" + _ctx.id
  }, [_hoisted_4, _hoisted_5, _hoisted_6], 8, ["id"]), _hoisted_7])), _ctx.logo ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_8, [(0, _vue.createVNode)("img", {
    src: _ctx.logo,
    class: "logo",
    alt: ""
  }, null, 8, ["src"])])) : (0, _vue.createCommentVNode)("", true)], 6);
}

var _default = {
  name: 'zmp-preloader',
  render: render,
  props: {
    logo: String,
    size: [Number, String]
  },
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs;
    var id = (0, _vue.computed)(function () {
      var _attrs$id;

      return (_attrs$id = attrs.id) != null ? _attrs$id : (0, _utils.getComponentId)();
    });
    return {
      id: id
    };
  }
};
exports.default = _default;