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

Build full featured iOS & Android apps using ZMP & Vue

import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
var _hoisted_1 = {
  key: 0,
  class: "ring-spinner"
};

var _hoisted_2 = /*#__PURE__*/_createVNode("div", {
  class: "ball-holder"
}, [/*#__PURE__*/_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__*/_createVNode("stop", {
  offset: "20%",
  "stop-opacity": "1"
}, null, -1);

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

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

var _hoisted_7 = /*#__PURE__*/_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__*/_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 _openBlock(), _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 ? (_openBlock(), _createBlock("div", _hoisted_1, [_hoisted_2])) : (_openBlock(), _createBlock("svg", _hoisted_3, [_createVNode("circle", {
    class: "spinner-path",
    fill: "transparent",
    cx: "33",
    cy: "33",
    r: "30",
    "stroke-width": "5",
    stroke: "url(#gradient-" + _ctx.id + ")"
  }, null, 8, ["stroke"]), _createVNode("linearGradient", {
    id: "gradient-" + _ctx.id
  }, [_hoisted_4, _hoisted_5, _hoisted_6], 8, ["id"]), _hoisted_7])), _ctx.logo ? (_openBlock(), _createBlock("div", _hoisted_8, [_createVNode("img", {
    src: _ctx.logo,
    class: "logo",
    alt: ""
  }, null, 8, ["src"])])) : _createCommentVNode("", true)], 6);
}

import { computed } from 'vue';
import { getComponentId } from '../shared/utils';
export default {
  name: 'zmp-preloader',
  render: render,
  props: {
    logo: String,
    size: [Number, String]
  },
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs;
    var id = computed(function () {
      var _attrs$id;

      return (_attrs$id = attrs.id) != null ? _attrs$id : getComponentId();
    });
    return {
      id: id
    };
  }
};