vue-cute-loading
Version:
My favorite loading component for Vue.js.
41 lines (34 loc) • 2.04 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.vueCuteLoading = factory());
}(this, (function () { 'use strict';
(function () {
if (typeof document !== 'undefined') {
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style'),
css = ".loading[data-v-43f74373] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding-bottom: 50px; display: flex; align-items: center; justify-content: center; } .loading .line[data-v-43f74373] { width: 4px; height: 35px; margin: 3px; border-radius: 2px; display: inline-block; animation: scaleLine 1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.28) both; } .loading .line[data-v-43f74373]:nth-child(1) { animation-delay: 0.1s; } .loading .line[data-v-43f74373]:nth-child(2) { animation-delay: 0.2s; } .loading .line[data-v-43f74373]:nth-child(3) { animation-delay: 0.3s; } .loading .line[data-v-43f74373]:nth-child(4) { animation-delay: 0.4s; } .loading .line[data-v-43f74373]:nth-child(5) { animation-delay: 0.5s; } @keyframes scaleLine { 0, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } } ";style.type = 'text/css';if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}head.appendChild(style);
}
})();
var Loading = { render: function () {
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "loading" }, _vm._l(5, function (i) {
return _c('div', { key: i, staticClass: "line", style: { backgroundColor: _vm.color } });
}));
}, staticRenderFns: [], _scopeId: 'data-v-43f74373',
name: 'Loading',
props: {
color: {
type: String,
default: 'lightblue'
}
}
};
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component(Loading.name, Loading);
}
return Loading;
})));