Skip to content

E
Element
Commit 1e57f25d authored by Leopoldthecoder's avatar Leopoldthecoder Committed by Black Wayne
Browse files
Options

Loading: add custom spinner and background

parent 5069718c
Show whitespace changes
Inline Side-by-side
Showing with 128 additions and 130 deletions
build/deploy-ci.sh
View file @ 1e57f25d
...@@ -46,6 +46,7 @@ if [ "$TRAVIS_TAG" ]; then ...@@ -46,6 +46,7 @@ if [ "$TRAVIS_TAG" ]; then
rm -rf $SUB_FOLDER/** rm -rf $SUB_FOLDER/**
# cp -rf ../../examples/element-ui/** . # cp -rf ../../examples/element-ui/** .
cp -rf ../../examples/element-ui/** $SUB_FOLDER/ cp -rf ../../examples/element-ui/** $SUB_FOLDER/
cp -rf ../../examples/element-ui/versions.json .
git add -A . git add -A .
git commit -m "$TRAVIS_COMMIT_MSG" git commit -m "$TRAVIS_COMMIT_MSG"
git push origin gh-pages git push origin gh-pages
......
examples/app.vue
View file @ 1e57f25d
...@@ -210,48 +210,11 @@ ...@@ -210,48 +210,11 @@
methods: { methods: {
localize() { localize() {
use(this.lang === 'zh-CN' ? zhLocale : enLocale); use(this.lang === 'zh-CN' ? zhLocale : enLocale);
},
renderAnchorHref() {
if (/changelog/g.test(location.href)) return;
const anchors = document.querySelectorAll('h2 a,h3 a');
const basePath = location.href.split('#').splice(0, 2).join('#');
[].slice.call(anchors).forEach(a => {
const href = a.getAttribute('href');
a.href = basePath + href;
});
},
goAnchor() {
if (location.href.match(/#/g).length > 1) {
const anchor = location.href.match(/#[^#]+$/g);
if (!anchor) return;
const elm = document.querySelector(anchor[0]);
if (!elm) return;
setTimeout(_ => {
document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
}, 50);
}
} }
}, },
mounted() { mounted() {
this.localize(); this.localize();
this.renderAnchorHref();
this.goAnchor();
},
created() {
window.addEventListener('hashchange', () => {
if (location.href.match(/#/g).length < 2) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.renderAnchorHref();
} else {
this.goAnchor();
}
});
} }
}; };
</script> </script>
examples/docs/en-US/loading.md
View file @ 1e57f25d
...@@ -32,7 +32,18 @@ ...@@ -32,7 +32,18 @@
this.fullscreenLoading = true; this.fullscreenLoading = true;
setTimeout(() => { setTimeout(() => {
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 3000); }, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
} }
} }
} }
...@@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data. ...@@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data.
``` ```
::: :::
### Loading text ### Customization
You can customize a text message. You can customize loading text, loading spinner and background color.
:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. :::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading2"
element-loading-text="Loading..." element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData" :data="tableData"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
...@@ -160,7 +173,7 @@ You can customize a text message. ...@@ -160,7 +173,7 @@ You can customize a text message.
Show a full screen animation while loading data. Show a full screen animation while loading data.
:::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`. :::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
```html ```html
<template> <template>
...@@ -168,7 +181,12 @@ Show a full screen animation while loading data. ...@@ -168,7 +181,12 @@ Show a full screen animation while loading data.
type="primary" type="primary"
@click="openFullScreen" @click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading"> v-loading.fullscreen.lock="fullscreenLoading">
Full screen loading for 3 seconds As a directive
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
As a service
</el-button> </el-button>
</template> </template>
...@@ -184,7 +202,18 @@ Show a full screen animation while loading data. ...@@ -184,7 +202,18 @@ Show a full screen animation while loading data.
this.fullscreenLoading = true; this.fullscreenLoading = true;
setTimeout(() => { setTimeout(() => {
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 3000); }, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
} }
} }
} }
...@@ -224,4 +253,6 @@ If Element is imported entirely, a globally method `$loading` will be registered ...@@ -224,4 +253,6 @@ If Element is imported entirely, a globally method `$loading` will be registered
| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true | | fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
| lock | same as the `lock` modifier of `v-loading` | boolean | — | false | | lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
| text | loading text that displays under the spinner | string | — | — | | text | loading text that displays under the spinner | string | — | — |
| spinner | class name of the custom spinner | string | — | — |
| background | background color of the mask | string | — | — |
| customClass | custom class name for Loading | string | — | — | | customClass | custom class name for Loading | string | — | — |
\ No newline at end of file
examples/docs/zh-CN/loading.md
View file @ 1e57f25d
...@@ -32,7 +32,18 @@ ...@@ -32,7 +32,18 @@
this.fullscreenLoading = true; this.fullscreenLoading = true;
setTimeout(() => { setTimeout(() => {
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 3000); }, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
} }
} }
} }
...@@ -100,16 +111,18 @@ ...@@ -100,16 +111,18 @@
``` ```
::: :::
### 加载文案 ### 自定义
可自定义加载文案。 可自定义加载文案、图标和背景色。
:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。 :::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。
```html ```html
<template> <template>
<el-table <el-table
v-loading="loading2" v-loading="loading2"
element-loading-text="拼命加载中" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData" :data="tableData"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
...@@ -158,7 +171,7 @@ ...@@ -158,7 +171,7 @@
页面数据加载时显示。 页面数据加载时显示。
:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用`lock`修饰符。 :::demo 当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
```html ```html
<template> <template>
...@@ -166,7 +179,12 @@ ...@@ -166,7 +179,12 @@
type="primary" type="primary"
@click="openFullScreen" @click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading"> v-loading.fullscreen.lock="fullscreenLoading">
显示整页加载，3 秒后消失 指令方式
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
服务方式
</el-button> </el-button>
</template> </template>
...@@ -182,7 +200,18 @@ ...@@ -182,7 +200,18 @@
this.fullscreenLoading = true; this.fullscreenLoading = true;
setTimeout(() => { setTimeout(() => {
this.fullscreenLoading = false; this.fullscreenLoading = false;
}, 3000); }, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
} }
} }
} }
...@@ -222,4 +251,6 @@ console.log(loadingInstance1 === loadingInstance2); // true ...@@ -222,4 +251,6 @@ console.log(loadingInstance1 === loadingInstance2); // true
| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true | | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false | | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
| text | 显示在加载图标下方的加载文案 | string | — | — | | text | 显示在加载图标下方的加载文案 | string | — | — |
| spinner | 自定义加载图标类名 | string | — | — |
| background | 遮罩背景色 | string | — | — |
| customClass | Loading 的自定义类名 | string | — | — | | customClass | Loading 的自定义类名 | string | — | — |
\ No newline at end of file
examples/pages/template/component.tpl
View file @ 1e57f25d
...@@ -209,11 +209,35 @@ ...@@ -209,11 +209,35 @@
} }
}, },
methods: { methods: {
renderAnchorHref() {
if (/changelog/g.test(location.href)) return;
const anchors = document.querySelectorAll('h2 a,h3 a');
const basePath = location.href.split('#').splice(0, 2).join('#');
[].slice.call(anchors).forEach(a => {
const href = a.getAttribute('href');
a.href = basePath + href;
});
},
goAnchor() {
if (location.href.match(/#/g).length > 1) {
const anchor = location.href.match(/#[^#]+$/g);
if (!anchor) return;
const elm = document.querySelector(anchor[0]);
if (!elm) return;
setTimeout(_ => {
this.componentScrollBox.scrollTop = elm.offsetTop;
}, 50);
}
},
toTop() { toTop() {
this.hover = false; this.hover = false;
this.showBackToTop = false; this.showBackToTop = false;
this.componentScrollBox.scrollTop = 0; this.componentScrollBox.scrollTop = 0;
}, },
handleScroll() { handleScroll() {
const scrollTop = this.componentScrollBox.scrollTop; const scrollTop = this.componentScrollBox.scrollTop;
this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight; this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
...@@ -235,12 +259,22 @@ ...@@ -235,12 +259,22 @@
bus.$on('navFade', val => { bus.$on('navFade', val => {
this.navFaded = val; this.navFaded = val;
}); });
window.addEventListener('hashchange', () => {
if (location.href.match(/#/g).length < 2) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.renderAnchorHref();
} else {
this.goAnchor();
}
});
}, },
mounted() { mounted() {
this.componentScrollBar = this.$refs.componentScrollBar; this.componentScrollBar = this.$refs.componentScrollBar;
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap'); this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
this.throttledScrollHandler = throttle(300, this.handleScroll); this.throttledScrollHandler = throttle(300, this.handleScroll);
this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler); this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
this.renderAnchorHref();
this.goAnchor();
document.body.classList.add('is-component'); document.body.classList.add('is-component');
}, },
destroyed() { destroyed() {
......
packages/loading/src/directive.js
View file @ 1e57f25d
...@@ -74,11 +74,17 @@ exports.install = Vue => { ...@@ -74,11 +74,17 @@ exports.install = Vue => {
}; };
Vue.directive('loading', { Vue.directive('loading', {
bind: function(el, binding) { bind: function(el, binding, vnode) {
const textExr = el.getAttribute('element-loading-text');
const spinnerExr = el.getAttribute('element-loading-spinner');
const backgroundExr = el.getAttribute('element-loading-background');
const vm = vnode.context;
const mask = new Mask({ const mask = new Mask({
el: document.createElement('div'), el: document.createElement('div'),
data: { data: {
text: el.getAttribute('element-loading-text'), text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
fullscreen: !!binding.modifiers.fullscreen fullscreen: !!binding.modifiers.fullscreen
} }
}); });
......
packages/loading/src/loading.vue
View file @ 1e57f25d
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
<div <div
v-show="visible" v-show="visible"
class="el-loading-mask" class="el-loading-mask"
:style="{ backgroundColor: background || '' }"
:class="[customClass, { 'is-fullscreen': fullscreen }]"> :class="[customClass, { 'is-fullscreen': fullscreen }]">
<div class="el-loading-spinner"> <div class="el-loading-spinner">
<svg class="circular" viewBox="25 25 50 50"> <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none"/> <circle class="path" cx="50" cy="50" r="20" fill="none"/>
</svg> </svg>
<i v-else :class="spinner"></i>
<p v-if="text" class="el-loading-text">{{ text }}</p> <p v-if="text" class="el-loading-text">{{ text }}</p>
</div> </div>
</div> </div>
...@@ -19,6 +21,8 @@ ...@@ -19,6 +21,8 @@
data() { data() {
return { return {
text: null, text: null,
spinner: null,
background: null,
fullscreen: true, fullscreen: true,
visible: false, visible: false,
customClass: '' customClass: ''
......
packages/message/assets/error.svg deleted 100644 → 0
View file @ 5069718c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>icon_danger</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message" transform="translate(-60.000000, -332.000000)">
<g id="带倾向_信息" transform="translate(60.000000, 332.000000)">
<g id="Rectangle-2">
<g id="icon_danger">
<rect id="Rectangle-2" fill="#FF4949" x="0" y="0" width="40" height="40"></rect>
<path d="M25.8172627,16.3451796 C25.9390902,16.2233483 26,16.0761418 26,15.9035523 C26,15.7309628 25.9390902,15.5837563 25.8172627,15.4619289 L24.5076157,14.1827411 C24.3857882,14.0609137 24.2436575,14 24.0812196,14 C23.9187817,14 23.776651,14.0609137 23.6548235,14.1827411 L20,17.8375635 L16.3147216,14.1827411 C16.1928902,14.0609137 16.0507595,14 15.8883216,14 C15.7258876,14 15.5837569,14.0609137 15.4619294,14.1827411 L14.1522824,15.4619289 C14.0507582,15.5837563 14,15.7309628 14,15.9035523 C14,16.0761418 14.0507582,16.2233483 14.1522824,16.3451796 L17.8375608,20.0000019 L14.1522824,23.6548243 C14.0507582,23.7766517 14,23.9238582 14,24.0964477 C14,24.2690372 14.0507582,24.4162437 14.1522824,24.5380711 L15.4619294,25.8172589 C15.5837569,25.9390863 15.7258876,26 15.8883216,26 C16.0507595,26 16.1928902,25.9390863 16.3147216,25.8172589 L20,22.1624365 L23.6548235,25.8172589 C23.776651,25.9390863 23.9187817,26 24.0812196,26 C24.2436575,26 24.3857882,25.9390863 24.5076157,25.8172589 L25.8172627,24.5380711 C25.9390902,24.4162437 26,24.2690372 26,24.0964477 C26,23.9238582 25.9390902,23.7766517 25.8172627,23.6548243 L22.1319804,20.0000019 L25.8172627,16.3451796 Z" id="Path" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
packages/message/assets/info.svg deleted 100644 → 0
View file @ 5069718c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>icon_info</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message" transform="translate(-60.000000, -152.000000)">
<g id="带倾向_信息" transform="translate(60.000000, 152.000000)">
<g id="Rectangle-2">
<g id="icon_info">
<rect id="Rectangle-2" fill="#50BFFF" x="0" y="0" width="40" height="40"></rect>
<path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
packages/message/assets/success.svg deleted 100644 → 0
View file @ 5069718c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>icon_success</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message" transform="translate(-60.000000, -212.000000)">
<g id="带倾向_信息" transform="translate(60.000000, 212.000000)">
<g id="Rectangle-2">
<g id="icon_success">
<rect id="Rectangle-2" fill="#13CE66" x="0" y="0" width="40" height="40"></rect>
<path d="M27.8255814,17.1484357 L19.01744,25.8281213 C18.9011609,25.9427083 18.7655033,26 18.610467,26 C18.455427,26 18.3197693,25.9427083 18.2034865,25.8281213 L18.0290716,25.65625 L13.1744186,20.84375 C13.0581395,20.729163 13,20.5954837 13,20.4427047 C13,20.2899293 13.0581395,20.15625 13.1744186,20.0416667 L14.3662772,18.8671857 C14.48256,18.7526023 14.6182177,18.6953107 14.7732577,18.6953107 C14.928294,18.6953107 15.0639516,18.7526023 15.1802307,18.8671857 L18.610467,22.276038 L25.8197693,15.1718713 C25.9360484,15.057288 26.071706,15 26.2267423,15 C26.3817823,15 26.51744,15.057288 26.6337228,15.1718713 L27.8255814,16.3463523 C27.9418605,16.4609357 28,16.594615 28,16.747394 C28,16.900173 27.9418605,17.0338523 27.8255814,17.1484357 L27.8255814,17.1484357 Z" id="Path" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
packages/message/assets/warning.svg deleted 100644 → 0
View file @ 5069718c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>icon_warning</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message" transform="translate(-60.000000, -272.000000)">
<g id="带倾向_信息-copy" transform="translate(60.000000, 272.000000)">
<g id="Rectangle-2">
<g id="icon_warning">
<rect id="Rectangle-2" fill="#F7BA2A" x="0" y="0" width="40" height="40"></rect>
<path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(20.000000, 20.000000) scale(1, -1) translate(-20.000000, -20.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
packages/theme-chalk/src/loading.scss
View file @ 1e57f25d
...@@ -53,6 +53,10 @@ ...@@ -53,6 +53,10 @@
stroke: $--color-primary; stroke: $--color-primary;
stroke-linecap: round; stroke-linecap: round;
} }
i {
color: $--color-primary;
}
} }
.el-loading-fade-enter, .el-loading-fade-enter,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment