blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Loading: update document

Browse Source
This commit is contained in:
陈嘉涵 2017-08-31 10:34:02 +08:00
parent dc854a4d56
commit 7574962af6
2 changed files with 15 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/examples-docs/loading.md
View File

@ -1,19 +1,8 @@
<style> <style>
.demo-loading { .demo-loading {
.van-loading { .van-loading {
margin: 0 auto; display: inline-block;
} margin: 10px 0 10px 20px;
.circle-loading {
margin: 20px auto;
}
.demo-loading__example--with-bg {
background-color: rgba(17, 17, 17, 0.7);
margin: 0 auto;
width: 120px;
padding: 45px 0;
border-radius: 10px;
} }
} }
</style> </style>
@ -29,39 +18,21 @@ Vue.component(Loading.name, Loading);
### 代码演示 ### 代码演示
#### 渐变深色spinner #### 单色 spinner
:::demo 渐变深色spinner :::demo 单色 spinner
```html ```html
<van-loading class="some-customized-class"></van-loading> <van-loading type="circle" color="white"></van-loading>
<van-loading type="circle" color="black"></van-loading>
``` ```
::: :::
#### 渐变浅色spinner #### 渐变色 spinner
:::demo 渐变浅色spinner :::demo 渐变色 spinner
```html ```html
<div class="demo-loading__example demo-loading__example--with-bg"> <van-loading type="gradient-circle" color="black"></van-loading>
<van-loading class="some-customized-class" :color="'white'"></van-loading> <van-loading type="gradient-circle" color="white"></van-loading>
</div>
<style>
.demo-loading__example--with-bg {
background-color: rgba(17, 17, 17, 0.7);
width: 120px;
padding: 45px 0;
border-radius: 10px;
}
</style>
```
:::
#### 单色spinner
:::demo 单色spinner
```html
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
``` ```
::: :::
@ -69,5 +40,5 @@ Vue.component(Loading.name, Loading);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| color | `loading`颜色 | `string` | `black` | `black`, `white` | | color | 颜色 | `string` | `black` | `black` `white` |
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` | | type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` |

9
packages/vant-css/src/loading.css
View File

@ -10,8 +10,6 @@
} }
.van-loading { .van-loading {
line-height: 0;
font-size: 0; font-size: 0;
&--circle { &--circle {
@ -26,11 +24,10 @@
} }
&__spinner { &__spinner {
display: inline-block;
height: 100%;
width: 100%; width: 100%;
animation: van-loading 0.8s linear; height: 100%;
animation-iteration-count: infinite; display: inline-block;
animation: van-loading 0.8s linear infinite;
&--circle { &--circle {
border-radius: 100%; border-radius: 100%;