├── .gitignore ├── screenshots └── 1.gif ├── .npmignore ├── gulpfile.js ├── package.json ├── README_zh.md ├── README.md ├── lib ├── index.js └── toast.css └── src └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /screenshots/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lin-xin/vue-toast/HEAD/screenshots/1.gif -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | screenshots 4 | .gitignore 5 | .npmignore 6 | .git/ -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const babel = require('gulp-babel'); 3 | 4 | gulp.task('default', () => { 5 | gulp.src('./src/index.js') 6 | .pipe(babel({ 7 | presets: ['@babel/env'] 8 | })) 9 | .pipe(gulp.dest('./lib')) 10 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-toast", 3 | "version": "2.1.0", 4 | "description": "A mobile toast plugin for vue2.", 5 | "keywords": [ 6 | "vue.js", 7 | "vue-plugin", 8 | "toast" 9 | ], 10 | "main": "lib/index.js", 11 | "directories": { 12 | "test": "test" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/lin-xin/vue-toast/issues", 16 | "email": "2981207131@qq.com" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/lin-xin/vue-toast.git" 21 | }, 22 | "scripts": { 23 | "test": "echo \"Error: no test specified\" && exit 1" 24 | }, 25 | "author": "linxin", 26 | "license": "ISC", 27 | "devDependencies": { 28 | "@babel/core": "^7.1.2", 29 | "@babel/preset-env": "^7.1.0", 30 | "gulp": "^3.9.1", 31 | "gulp-babel": "^8.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | # vue2-toast 2 | 基于vue2的移动端 toast 插件。 [English document](https://github.com/lin-xin/vue-toast/blob/master/README.md) 3 | 4 |

5 | Downloads 6 | Version 7 |
8 |

9 | 10 | [互动演示](http://blog.gdfengshuo.com/example/#/vue2-toast) 11 | 12 | ## 使用 13 | 安装: 14 | 15 | ``` 16 | npm install vue2-toast -S 17 | ``` 18 | 引入: 19 | 20 | ```javascript 21 | import 'vue2-toast/lib/toast.css'; 22 | import Toast from 'vue2-toast'; 23 | Vue.use(Toast); 24 | ``` 25 | 或者使用配置 26 | 27 | ```javascript 28 | import 'vue2-toast/lib/toast.css'; 29 | import Toast from 'vue2-toast'; 30 | Vue.use(Toast, { 31 | type: 'center', 32 | duration: 3000, 33 | wordWrap: true, 34 | width: '150px' 35 | }); 36 | ``` 37 | 38 | 在组件中使用: 39 | 40 | ```javascript 41 | 49 | export default { 50 | methods:{ 51 | openTop(){ 52 | this.$toast.top('top'); 53 | }, 54 | openCenter(){ 55 | this.$toast.center('center'); 56 | }, 57 | openBottom(){ 58 | this.$toast('bottom'); // or this.$toast.bottom('bottom'); 59 | }, 60 | openLoading(){ 61 | this.$loading('loading...'); 62 | let self = this; 63 | setTimeout(function () { 64 | self.closeLoading() 65 | }, 2000) 66 | }, 67 | closeLoading(){ 68 | this.$loading.close(); 69 | } 70 | } 71 | } 72 | ``` 73 | ## 在 Nuxt.js 中使用 74 | 除了 nuxt.js 使用 vue 插件的配置之外，还需要再 nuxt.config.js 添加以下配置 75 | 76 | ```js 77 | build: { 78 | vendor: ['vue2-toast'], 79 | extend (config, ctx) { 80 | if (ctx.isClient) { 81 | config.resolve.alias['vue'] = 'vue/dist/vue.js'; 82 | } 83 | } 84 | } 85 | ``` 86 | 87 | ## 配置 88 | 89 | Vue.use(Toast, [options]) 90 | 91 | - type : Toast 的位置. | String | 默认: 'bottom' | 可选值 'top, center,bottom' 92 | - duration : Number | 默认 2500ms 93 | - wordWrap : 是否自动换行. | Boolean | 默认: false 94 | - width : Toast 的宽度. | String | 默认: 'auto' 95 | 96 | 97 | ## demo 98 | ![image](https://raw.githubusercontent.com/lin-xin/vue-toast/master/screenshots/1.gif) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue2-toast 2 | A mobile toast plugin for vue2. [中文文档](https://github.com/lin-xin/vue-toast/blob/master/README_zh.md) 3 | 4 |

5 | Downloads 6 | Version 7 |
8 |

9 | 10 | [Interactive Demo](http://blog.gdfengshuo.com/example/#/vue2-toast) 11 | 12 | ## Usage 13 | Install: 14 | 15 | ``` 16 | npm install vue2-toast -S 17 | ``` 18 | Import: 19 | 20 | ```javascript 21 | import 'vue2-toast/lib/toast.css'; 22 | import Toast from 'vue2-toast'; 23 | Vue.use(Toast); 24 | ``` 25 | or 26 | ```javascript 27 | import 'vue2-toast/lib/toast.css'; 28 | import Toast from 'vue2-toast'; 29 | Vue.use(Toast, { 30 | type: 'center', 31 | duration: 3000, 32 | wordWrap: true, 33 | width: '150px' 34 | }); 35 | ``` 36 | 37 | Use in component: 38 | 39 | ```javascript 40 | 48 | export default { 49 | methods:{ 50 | openTop(){ 51 | this.$toast.top('top'); 52 | }, 53 | openCenter(){ 54 | this.$toast.center('center'); 55 | }, 56 | openBottom(){ 57 | this.$toast('bottom'); // or this.$toast.bottom('bottom'); 58 | }, 59 | openLoading(){ 60 | this.$loading('loading...'); 61 | let self = this; 62 | setTimeout(function () { 63 | self.closeLoading() 64 | }, 2000) 65 | }, 66 | closeLoading(){ 67 | this.$loading.close(); 68 | } 69 | } 70 | } 71 | ``` 72 | ## work in Nuxt.js 73 | config it in nuxt.config.js 74 | 75 | ```js 76 | build: { 77 | vendor: ['vue2-toast'], 78 | extend (config, ctx) { 79 | if (ctx.isClient) { 80 | config.resolve.alias['vue'] = 'vue/dist/vue.js'; 81 | } 82 | } 83 | } 84 | ``` 85 | 86 | ## options 87 | 88 | Vue.use(Toast, [options]) 89 | 90 | - type : position of Toast. | String | default: 'bottom' | possible 'top, center,bottom' 91 | - duration : Number | default 2500ms 92 | - wordWrap : word wrap. | Boolean | default: false 93 | - width : width of Toast. | String | default: 'auto' 94 | 95 | ## source code 96 | download in [Github](https://github.com/lin-xin/vue-toast). 97 | 98 | ## demo 99 | ![image](https://raw.githubusercontent.com/lin-xin/vue-toast/master/screenshots/1.gif) -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = void 0; 7 | 8 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 9 | 10 | var Toast = {}; // toastTimer:存储toast定时器id; toastVM:存储toast vm; showLoad:存储loading显示状态; loadNode:存储loading节点元素; 11 | 12 | var toastTimer = false, 13 | toastVM = null, 14 | showLoad = false, 15 | loadNode = null; // 默认配置 16 | 17 | var defaultOption = { 18 | type: 'bottom', 19 | duration: '2500', 20 | wordWrap: false, 21 | width: 'auto' 22 | }; 23 | 24 | Toast.install = function (Vue, options) { 25 | /** 26 | * toast方法 27 | * @param {string} tip 提示文本 28 | * @param {object|string} config 配置参数 29 | */ 30 | Vue.prototype.$toast = function (tip, config) { 31 | var option = {}; 32 | Object.assign(option, defaultOption, options); 33 | 34 | if (_typeof(config) === 'object') { 35 | Object.assign(option, config); 36 | } else if (config) { 37 | option['type'] = config; 38 | } 39 | 40 | if (toastTimer) { 41 | // 如果toast还在，则取消上次消失时间 42 | clearTimeout(toastTimer); 43 | toastVM.show = false; 44 | } 45 | 46 | if (!toastVM) { 47 | var toastTpl = Vue.extend({ 48 | data: function data() { 49 | return { 50 | show: false, 51 | tip: tip, 52 | wordWrap: option.wordWrap, 53 | type: option.type, 54 | extStyle: { 55 | width: option.width 56 | } 57 | }; 58 | }, 59 | render: function render(h) { 60 | if (!this.show) { 61 | return false; 62 | } 63 | 64 | return h('div', { 65 | class: ['lx-toast', "lx-toast-".concat(this.type), this.wordWrap ? 'lx-word-wrap' : ''], 66 | style: this.extStyle, 67 | show: this.show, 68 | domProps: { 69 | innerHTML: this.tip 70 | } 71 | }); 72 | } 73 | }); 74 | toastVM = new toastTpl(); 75 | var tpl = toastVM.$mount().$el; 76 | document.body.appendChild(tpl); 77 | } 78 | 79 | toastVM.tip = tip; 80 | toastVM.wordWrap = option.wordWrap; 81 | toastVM.type = option.type; 82 | toastVM.extStyle.width = option.width; 83 | toastVM.show = true; 84 | toastTimer = setTimeout(function () { 85 | toastVM.show = toastTimer = false; 86 | }, option.duration); 87 | }; 88 | 89 | ['bottom', 'center', 'top'].forEach(function (type) { 90 | Vue.prototype.$toast[type] = function (tip) { 91 | var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { 92 | type: type 93 | }; 94 | return Vue.prototype.$toast(tip, config); 95 | }; 96 | }); 97 | /** 98 | * loading方法 99 | * @param {*string} tip 提示文本 100 | * @param {*string} type loading类型，可选open/close 101 | */ 102 | 103 | Vue.prototype.$loading = function (tip, type) { 104 | if (type === 'close') { 105 | if (loadNode) { 106 | loadNode.show = showLoad = false; 107 | } 108 | } else { 109 | if (showLoad && loadNode) { 110 | showLoad.tip = tip; 111 | return false; 112 | } 113 | 114 | var loadTpl = Vue.extend({ 115 | data: function data() { 116 | return { 117 | show: false, 118 | tip: tip 119 | }; 120 | }, 121 | render: function render(h) { 122 | if (!this.show) { 123 | return; 124 | } 125 | 126 | return h('div', { 127 | class: 'lx-load-mark', 128 | show: this.show 129 | }, [h('div', { 130 | class: 'lx-load-box' 131 | }, [h('div', { 132 | class: this.tip ? 'lx-loading' : 'lx-loading-nocontent' 133 | }, Array.apply(null, { 134 | length: 12 135 | }).map(function (value, index) { 136 | return h('div', { 137 | class: ['loading_leaf', "loading_leaf_".concat(index)] 138 | }); 139 | })), h('div', { 140 | class: 'lx-load-content', 141 | domProps: { 142 | innerHTML: this.tip 143 | } 144 | })])]); 145 | } 146 | }); 147 | loadNode = new loadTpl(); 148 | var tpl = loadNode.$mount().$el; 149 | document.body.appendChild(tpl); 150 | loadNode.show = showLoad = true; 151 | } 152 | }; 153 | 154 | ['open', 'close'].forEach(function (type) { 155 | Vue.prototype.$loading[type] = function (tip) { 156 | return Vue.prototype.$loading(tip, type); 157 | }; 158 | }); 159 | }; 160 | 161 | var _default = Toast; 162 | exports.default = _default; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const Toast = {}; 2 | // toastTimer:存储toast定时器id; toastVM:存储toast vm; showLoad:存储loading显示状态; loadNode:存储loading节点元素; 3 | let [toastTimer, toastVM, showLoad, loadNode] = [false, null, false, null]; 4 | 5 | // 默认配置 6 | const defaultOption = { 7 | type: 'bottom', 8 | duration: '2500', 9 | wordWrap: false, 10 | width: 'auto' 11 | }; 12 | 13 | Toast.install = (Vue, options) => { 14 | /** 15 | * toast方法 16 | * @param {string} tip 提示文本 17 | * @param {object|string} config 配置参数 18 | */ 19 | Vue.prototype.$toast = (tip, config) => { 20 | let option = {}; 21 | Object.assign(option, defaultOption, options); 22 | 23 | if(typeof config === 'object'){ 24 | Object.assign(option, config); 25 | }else if(config){ 26 | option['type'] = config 27 | } 28 | 29 | if (toastTimer) { 30 | // 如果toast还在，则取消上次消失时间 31 | clearTimeout(toastTimer); 32 | toastVM.show = false; 33 | } 34 | 35 | if(!toastVM){ 36 | const toastTpl = Vue.extend({ 37 | data(){ 38 | return { 39 | show: false, 40 | tip, 41 | wordWrap: option.wordWrap, 42 | type: option.type, 43 | extStyle: { 44 | width: option.width 45 | }, 46 | } 47 | }, 48 | render(h){ 49 | if(!this.show){ 50 | return false; 51 | } 52 | return h( 53 | 'div', 54 | { 55 | class: ['lx-toast', `lx-toast-${this.type}`, this.wordWrap?'lx-word-wrap':''], 56 | style: this.extStyle, 57 | show: this.show, 58 | domProps: { 59 | innerHTML: this.tip 60 | } 61 | } 62 | ) 63 | } 64 | }); 65 | toastVM = new toastTpl(); 66 | const tpl = toastVM.$mount().$el; 67 | document.body.appendChild(tpl); 68 | } 69 | 70 | toastVM.tip = tip; 71 | toastVM.wordWrap = option.wordWrap; 72 | toastVM.type = option.type; 73 | toastVM.extStyle.width = option.width; 74 | toastVM.show = true; 75 | 76 | toastTimer = setTimeout(() => { 77 | toastVM.show = toastTimer = false; 78 | }, option.duration); 79 | }; 80 | 81 | ['bottom', 'center', 'top'].forEach(type => { 82 | Vue.prototype.$toast[type] = (tip, config = {type}) => { 83 | return Vue.prototype.$toast(tip, config); 84 | } 85 | }); 86 | 87 | /** 88 | * loading方法 89 | * @param {*string} tip 提示文本 90 | * @param {*string} type loading类型，可选open/close 91 | */ 92 | Vue.prototype.$loading = (tip, type) => { 93 | if(type === 'close'){ 94 | if(loadNode){ 95 | loadNode.show = showLoad = false; 96 | } 97 | }else{ 98 | if(showLoad && loadNode){ 99 | showLoad.tip = tip; 100 | return false; 101 | } 102 | const loadTpl = Vue.extend({ 103 | data(){ 104 | return { 105 | show: false, 106 | tip 107 | } 108 | }, 109 | render(h){ 110 | if(!this.show){ 111 | return ; 112 | } 113 | return h('div', { 114 | class: 'lx-load-mark', 115 | show: this.show 116 | },[ 117 | h('div', { 118 | class: 'lx-load-box' 119 | }, [ 120 | h('div', { 121 | class: this.tip?'lx-loading':'lx-loading-nocontent' 122 | }, Array.apply(null, {length: 12}).map((value, index) => { 123 | return h('div', { 124 | class: ['loading_leaf',`loading_leaf_${index}`] 125 | }) 126 | })), 127 | h('div', { 128 | class: 'lx-load-content', 129 | domProps: { 130 | innerHTML: this.tip 131 | } 132 | }) 133 | ]) 134 | ]) 135 | } 136 | }); 137 | loadNode = new loadTpl(); 138 | const tpl = loadNode.$mount().$el; 139 | 140 | document.body.appendChild(tpl); 141 | loadNode.show = showLoad = true; 142 | } 143 | }; 144 | 145 | ['open', 'close'].forEach(type => { 146 | Vue.prototype.$loading[type] = tip => { 147 | return Vue.prototype.$loading(tip, type); 148 | } 149 | }) 150 | } 151 | export default Toast; -------------------------------------------------------------------------------- /lib/toast.css: -------------------------------------------------------------------------------- 1 | .lx-toast { 2 | position: fixed; 3 | bottom: 100px; 4 | left: 50%; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | max-width: 80%; 8 | height: 40px; 9 | line-height: 20px; 10 | padding: 10px 20px; 11 | transform: translateX(-50%); 12 | -webkit-transform: translateX(-50%); 13 | text-align: center; 14 | z-index: 9999; 15 | font-size: 14px; 16 | color: #fff; 17 | border-radius: 5px; 18 | background: rgba(0, 0, 0, 0.7); 19 | animation: show-toast .5s; 20 | -webkit-animation: show-toast .5s; 21 | overflow: hidden; 22 | text-overflow: ellipsis; 23 | white-space: nowrap; 24 | } 25 | 26 | .lx-toast.lx-word-wrap { 27 | width: 80%; 28 | white-space: inherit; 29 | height: auto; 30 | } 31 | 32 | .lx-toast.lx-toast-top { 33 | top: 50px; 34 | bottom: inherit; 35 | } 36 | 37 | .lx-toast.lx-toast-center { 38 | top: 50%; 39 | margin-top: -20px; 40 | bottom: inherit; 41 | } 42 | 43 | @-webkit-keyframes show-toast { 44 | from { 45 | opacity: 0; 46 | } 47 | to { 48 | opacity: 1; 49 | } 50 | } 51 | 52 | @keyframes show-toast { 53 | from { 54 | opacity: 0; 55 | } 56 | to { 57 | opacity: 1; 58 | } 59 | } 60 | 61 | .lx-load-mark { 62 | position: fixed; 63 | left: 0; 64 | top: 0; 65 | width: 100%; 66 | height: 100%; 67 | z-index: 9999; 68 | } 69 | 70 | .lx-load-box { 71 | position: fixed; 72 | z-index: 3; 73 | width: 7.6em; 74 | min-height: 7.6em; 75 | top: 180px; 76 | left: 50%; 77 | margin-left: -3.8em; 78 | background: rgba(0, 0, 0, 0.7); 79 | text-align: center; 80 | border-radius: 5px; 81 | color: #FFFFFF; 82 | } 83 | 84 | .lx-load-content { 85 | margin-top: 64%; 86 | font-size: 14px; 87 | } 88 | 89 | .lx-loading, .lx-loading-nocontent { 90 | position: absolute; 91 | width: 0px; 92 | left: 50%; 93 | top: 38%; 94 | } 95 | 96 | .lx-loading-nocontent { 97 | top: 50%; 98 | } 99 | 100 | .loading_leaf { 101 | position: absolute; 102 | top: -1px; 103 | opacity: 0.25; 104 | } 105 | 106 | .loading_leaf:before { 107 | content: " "; 108 | position: absolute; 109 | width: 9.14px; 110 | height: 3.08px; 111 | background: #d1d1d5; 112 | -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; 113 | box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; 114 | border-radius: 1px; 115 | -webkit-transform-origin: left 50% 0px; 116 | transform-origin: left 50% 0px; 117 | } 118 | 119 | .loading_leaf_0 { 120 | -webkit-animation: opacity-0 1.25s linear infinite; 121 | animation: opacity-0 1.25s linear infinite; 122 | } 123 | 124 | .loading_leaf_0:before { 125 | -webkit-transform: rotate(0deg) translate(7.92px, 0px); 126 | transform: rotate(0deg) translate(7.92px, 0px); 127 | } 128 | 129 | .loading_leaf_1 { 130 | -webkit-animation: opacity-1 1.25s linear infinite; 131 | animation: opacity-1 1.25s linear infinite; 132 | } 133 | 134 | .loading_leaf_1:before { 135 | -webkit-transform: rotate(30deg) translate(7.92px, 0px); 136 | transform: rotate(30deg) translate(7.92px, 0px); 137 | } 138 | 139 | .loading_leaf_2 { 140 | -webkit-animation: opacity-2 1.25s linear infinite; 141 | animation: opacity-2 1.25s linear infinite; 142 | } 143 | 144 | .loading_leaf_2:before { 145 | -webkit-transform: rotate(60deg) translate(7.92px, 0px); 146 | transform: rotate(60deg) translate(7.92px, 0px); 147 | } 148 | 149 | .loading_leaf_3 { 150 | -webkit-animation: opacity-3 1.25s linear infinite; 151 | animation: opacity-3 1.25s linear infinite; 152 | } 153 | 154 | .loading_leaf_3:before { 155 | -webkit-transform: rotate(90deg) translate(7.92px, 0px); 156 | transform: rotate(90deg) translate(7.92px, 0px); 157 | } 158 | 159 | .loading_leaf_4 { 160 | -webkit-animation: opacity-4 1.25s linear infinite; 161 | animation: opacity-4 1.25s linear infinite; 162 | } 163 | 164 | .loading_leaf_4:before { 165 | -webkit-transform: rotate(120deg) translate(7.92px, 0px); 166 | transform: rotate(120deg) translate(7.92px, 0px); 167 | } 168 | 169 | .loading_leaf_5 { 170 | -webkit-animation: opacity-5 1.25s linear infinite; 171 | animation: opacity-5 1.25s linear infinite; 172 | } 173 | 174 | .loading_leaf_5:before { 175 | -webkit-transform: rotate(150deg) translate(7.92px, 0px); 176 | transform: rotate(150deg) translate(7.92px, 0px); 177 | } 178 | 179 | .loading_leaf_6 { 180 | -webkit-animation: opacity-6 1.25s linear infinite; 181 | animation: opacity-6 1.25s linear infinite; 182 | } 183 | 184 | .loading_leaf_6:before { 185 | -webkit-transform: rotate(180deg) translate(7.92px, 0px); 186 | transform: rotate(180deg) translate(7.92px, 0px); 187 | } 188 | 189 | .loading_leaf_7 { 190 | -webkit-animation: opacity-7 1.25s linear infinite; 191 | animation: opacity-7 1.25s linear infinite; 192 | } 193 | 194 | .loading_leaf_7:before { 195 | -webkit-transform: rotate(210deg) translate(7.92px, 0px); 196 | transform: rotate(210deg) translate(7.92px, 0px); 197 | } 198 | 199 | .loading_leaf_8 { 200 | -webkit-animation: opacity-8 1.25s linear infinite; 201 | animation: opacity-8 1.25s linear infinite; 202 | } 203 | 204 | .loading_leaf_8:before { 205 | -webkit-transform: rotate(240deg) translate(7.92px, 0px); 206 | transform: rotate(240deg) translate(7.92px, 0px); 207 | } 208 | 209 | .loading_leaf_9 { 210 | -webkit-animation: opacity-9 1.25s linear infinite; 211 | animation: opacity-9 1.25s linear infinite; 212 | } 213 | 214 | .loading_leaf_9:before { 215 | -webkit-transform: rotate(270deg) translate(7.92px, 0px); 216 | transform: rotate(270deg) translate(7.92px, 0px); 217 | } 218 | 219 | .loading_leaf_10 { 220 | -webkit-animation: opacity-10 1.25s linear infinite; 221 | animation: opacity-10 1.25s linear infinite; 222 | } 223 | 224 | .loading_leaf_10:before { 225 | -webkit-transform: rotate(300deg) translate(7.92px, 0px); 226 | transform: rotate(300deg) translate(7.92px, 0px); 227 | } 228 | 229 | .loading_leaf_11 { 230 | -webkit-animation: opacity-11 1.25s linear infinite; 231 | animation: opacity-11 1.25s linear infinite; 232 | } 233 | 234 | .loading_leaf_11:before { 235 | -webkit-transform: rotate(330deg) translate(7.92px, 0px); 236 | transform: rotate(330deg) translate(7.92px, 0px); 237 | } 238 | 239 | @-webkit-keyframes opacity-0 { 240 | 0% { 241 | opacity: 0.25; 242 | } 243 | 0.01% { 244 | opacity: 0.25; 245 | } 246 | 0.02% { 247 | opacity: 1; 248 | } 249 | 60.01% { 250 | opacity: 0.25; 251 | } 252 | 100% { 253 | opacity: 0.25; 254 | } 255 | } 256 | 257 | @keyframes opacity-0 { 258 | 0% { 259 | opacity: 0.25; 260 | } 261 | 0.01% { 262 | opacity: 0.25; 263 | } 264 | 0.02% { 265 | opacity: 1; 266 | } 267 | 60.01% { 268 | opacity: 0.25; 269 | } 270 | 100% { 271 | opacity: 0.25; 272 | } 273 | } 274 | 275 | @-webkit-keyframes opacity-1 { 276 | 0% { 277 | opacity: 0.25; 278 | } 279 | 8.34333% { 280 | opacity: 0.25; 281 | } 282 | 8.35333% { 283 | opacity: 1; 284 | } 285 | 68.3433% { 286 | opacity: 0.25; 287 | } 288 | 100% { 289 | opacity: 0.25; 290 | } 291 | } 292 | 293 | @keyframes opacity-1 { 294 | 0% { 295 | opacity: 0.25; 296 | } 297 | 8.34333% { 298 | opacity: 0.25; 299 | } 300 | 8.35333% { 301 | opacity: 1; 302 | } 303 | 68.3433% { 304 | opacity: 0.25; 305 | } 306 | 100% { 307 | opacity: 0.25; 308 | } 309 | } 310 | 311 | @-webkit-keyframes opacity-2 { 312 | 0% { 313 | opacity: 0.25; 314 | } 315 | 16.6767% { 316 | opacity: 0.25; 317 | } 318 | 16.6867% { 319 | opacity: 1; 320 | } 321 | 76.6767% { 322 | opacity: 0.25; 323 | } 324 | 100% { 325 | opacity: 0.25; 326 | } 327 | } 328 | 329 | @keyframes opacity-2 { 330 | 0% { 331 | opacity: 0.25; 332 | } 333 | 16.6767% { 334 | opacity: 0.25; 335 | } 336 | 16.6867% { 337 | opacity: 1; 338 | } 339 | 76.6767% { 340 | opacity: 0.25; 341 | } 342 | 100% { 343 | opacity: 0.25; 344 | } 345 | } 346 | 347 | @-webkit-keyframes opacity-3 { 348 | 0% { 349 | opacity: 0.25; 350 | } 351 | 25.01% { 352 | opacity: 0.25; 353 | } 354 | 25.02% { 355 | opacity: 1; 356 | } 357 | 85.01% { 358 | opacity: 0.25; 359 | } 360 | 100% { 361 | opacity: 0.25; 362 | } 363 | } 364 | 365 | @keyframes opacity-3 { 366 | 0% { 367 | opacity: 0.25; 368 | } 369 | 25.01% { 370 | opacity: 0.25; 371 | } 372 | 25.02% { 373 | opacity: 1; 374 | } 375 | 85.01% { 376 | opacity: 0.25; 377 | } 378 | 100% { 379 | opacity: 0.25; 380 | } 381 | } 382 | 383 | @-webkit-keyframes opacity-4 { 384 | 0% { 385 | opacity: 0.25; 386 | } 387 | 33.3433% { 388 | opacity: 0.25; 389 | } 390 | 33.3533% { 391 | opacity: 1; 392 | } 393 | 93.3433% { 394 | opacity: 0.25; 395 | } 396 | 100% { 397 | opacity: 0.25; 398 | } 399 | } 400 | 401 | @keyframes opacity-4 { 402 | 0% { 403 | opacity: 0.25; 404 | } 405 | 33.3433% { 406 | opacity: 0.25; 407 | } 408 | 33.3533% { 409 | opacity: 1; 410 | } 411 | 93.3433% { 412 | opacity: 0.25; 413 | } 414 | 100% { 415 | opacity: 0.25; 416 | } 417 | } 418 | 419 | @-webkit-keyframes opacity-5 { 420 | 0% { 421 | opacity: 0.270958333333333; 422 | } 423 | 41.6767% { 424 | opacity: 0.25; 425 | } 426 | 41.6867% { 427 | opacity: 1; 428 | } 429 | 1.67667% { 430 | opacity: 0.25; 431 | } 432 | 100% { 433 | opacity: 0.270958333333333; 434 | } 435 | } 436 | 437 | @keyframes opacity-5 { 438 | 0% { 439 | opacity: 0.270958333333333; 440 | } 441 | 41.6767% { 442 | opacity: 0.25; 443 | } 444 | 41.6867% { 445 | opacity: 1; 446 | } 447 | 1.67667% { 448 | opacity: 0.25; 449 | } 450 | 100% { 451 | opacity: 0.270958333333333; 452 | } 453 | } 454 | 455 | @-webkit-keyframes opacity-6 { 456 | 0% { 457 | opacity: 0.375125; 458 | } 459 | 50.01% { 460 | opacity: 0.25; 461 | } 462 | 50.02% { 463 | opacity: 1; 464 | } 465 | 10.01% { 466 | opacity: 0.25; 467 | } 468 | 100% { 469 | opacity: 0.375125; 470 | } 471 | } 472 | 473 | @keyframes opacity-6 { 474 | 0% { 475 | opacity: 0.375125; 476 | } 477 | 50.01% { 478 | opacity: 0.25; 479 | } 480 | 50.02% { 481 | opacity: 1; 482 | } 483 | 10.01% { 484 | opacity: 0.25; 485 | } 486 | 100% { 487 | opacity: 0.375125; 488 | } 489 | } 490 | 491 | @-webkit-keyframes opacity-7 { 492 | 0% { 493 | opacity: 0.479291666666667; 494 | } 495 | 58.3433% { 496 | opacity: 0.25; 497 | } 498 | 58.3533% { 499 | opacity: 1; 500 | } 501 | 18.3433% { 502 | opacity: 0.25; 503 | } 504 | 100% { 505 | opacity: 0.479291666666667; 506 | } 507 | } 508 | 509 | @keyframes opacity-7 { 510 | 0% { 511 | opacity: 0.479291666666667; 512 | } 513 | 58.3433% { 514 | opacity: 0.25; 515 | } 516 | 58.3533% { 517 | opacity: 1; 518 | } 519 | 18.3433% { 520 | opacity: 0.25; 521 | } 522 | 100% { 523 | opacity: 0.479291666666667; 524 | } 525 | } 526 | 527 | @-webkit-keyframes opacity-8 { 528 | 0% { 529 | opacity: 0.583458333333333; 530 | } 531 | 66.6767% { 532 | opacity: 0.25; 533 | } 534 | 66.6867% { 535 | opacity: 1; 536 | } 537 | 26.6767% { 538 | opacity: 0.25; 539 | } 540 | 100% { 541 | opacity: 0.583458333333333; 542 | } 543 | } 544 | 545 | @keyframes opacity-8 { 546 | 0% { 547 | opacity: 0.583458333333333; 548 | } 549 | 66.6767% { 550 | opacity: 0.25; 551 | } 552 | 66.6867% { 553 | opacity: 1; 554 | } 555 | 26.6767% { 556 | opacity: 0.25; 557 | } 558 | 100% { 559 | opacity: 0.583458333333333; 560 | } 561 | } 562 | 563 | @-webkit-keyframes opacity-9 { 564 | 0% { 565 | opacity: 0.687625; 566 | } 567 | 75.01% { 568 | opacity: 0.25; 569 | } 570 | 75.02% { 571 | opacity: 1; 572 | } 573 | 35.01% { 574 | opacity: 0.25; 575 | } 576 | 100% { 577 | opacity: 0.687625; 578 | } 579 | } 580 | 581 | @keyframes opacity-9 { 582 | 0% { 583 | opacity: 0.687625; 584 | } 585 | 75.01% { 586 | opacity: 0.25; 587 | } 588 | 75.02% { 589 | opacity: 1; 590 | } 591 | 35.01% { 592 | opacity: 0.25; 593 | } 594 | 100% { 595 | opacity: 0.687625; 596 | } 597 | } 598 | 599 | @-webkit-keyframes opacity-10 { 600 | 0% { 601 | opacity: 0.791791666666667; 602 | } 603 | 83.3433% { 604 | opacity: 0.25; 605 | } 606 | 83.3533% { 607 | opacity: 1; 608 | } 609 | 43.3433% { 610 | opacity: 0.25; 611 | } 612 | 100% { 613 | opacity: 0.791791666666667; 614 | } 615 | } 616 | 617 | @keyframes opacity-10 { 618 | 0% { 619 | opacity: 0.791791666666667; 620 | } 621 | 83.3433% { 622 | opacity: 0.25; 623 | } 624 | 83.3533% { 625 | opacity: 1; 626 | } 627 | 43.3433% { 628 | opacity: 0.25; 629 | } 630 | 100% { 631 | opacity: 0.791791666666667; 632 | } 633 | } 634 | 635 | @-webkit-keyframes opacity-11 { 636 | 0% { 637 | opacity: 0.895958333333333; 638 | } 639 | 91.6767% { 640 | opacity: 0.25; 641 | } 642 | 91.6867% { 643 | opacity: 1; 644 | } 645 | 51.6767% { 646 | opacity: 0.25; 647 | } 648 | 100% { 649 | opacity: 0.895958333333333; 650 | } 651 | } 652 | 653 | @keyframes opacity-11 { 654 | 0% { 655 | opacity: 0.895958333333333; 656 | } 657 | 91.6767% { 658 | opacity: 0.25; 659 | } 660 | 91.6867% { 661 | opacity: 1; 662 | } 663 | 51.6767% { 664 | opacity: 0.25; 665 | } 666 | 100% { 667 | opacity: 0.895958333333333; 668 | } 669 | } --------------------------------------------------------------------------------