diff --git a/example/app.json b/example/app.json index 7121e6d0..89f50d91 100644 --- a/example/app.json +++ b/example/app.json @@ -12,6 +12,7 @@ "pages/helper/index", "pages/icon/index", "pages/layout/index", + "pages/loading/index", "pages/noticebar/index", "pages/panel/index", "pages/popup/index", diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index 07958639..cb7a68cb 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -26,6 +26,9 @@ export default { }, { name: 'Layout 布局', path: '/pages/layout/index' + }, { + name: 'loading 加载', + path: '/pages/loading/index' }, { name: 'Noticebar 通告栏', path: '/pages/noticebar/index' diff --git a/example/pages/loading/index.js b/example/pages/loading/index.js new file mode 100644 index 00000000..9555c825 --- /dev/null +++ b/example/pages/loading/index.js @@ -0,0 +1 @@ +Page({}) \ No newline at end of file diff --git a/example/pages/loading/index.json b/example/pages/loading/index.json new file mode 100644 index 00000000..33ad67d1 --- /dev/null +++ b/example/pages/loading/index.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "loading 加载", + "usingComponents": { + "zan-loading": "../../dist/loading/index" + } +} \ No newline at end of file diff --git a/example/pages/loading/index.wxml b/example/pages/loading/index.wxml new file mode 100644 index 00000000..c620cfef --- /dev/null +++ b/example/pages/loading/index.wxml @@ -0,0 +1,21 @@ + + + LOADING + + circle + + + + + spinner + + + + + dot + + + + + + diff --git a/example/pages/loading/index.wxss b/example/pages/loading/index.wxss new file mode 100644 index 00000000..434bad3d --- /dev/null +++ b/example/pages/loading/index.wxss @@ -0,0 +1,14 @@ +.container { + background: #f0f0f0; +} +.loading-example { + display: flex; + flex-direction: row; + background: transparent; +} +.loading-example zan-loading { + flex: 1; +} +.no-flex { + display: block; +} \ No newline at end of file diff --git a/packages/loading/README.md b/packages/loading/README.md new file mode 100644 index 00000000..a5c01916 --- /dev/null +++ b/packages/loading/README.md @@ -0,0 +1,27 @@ +## Loading 加载 + +### 属性 + +| 名称 | 类型 | 是否必须 | 默认 | 描述 | +| ------- | --------------- | -------- | ----- | ----------------- | +| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot | +| color | String | 否 | 无 | 可选值 black | +| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 | + +### 代码演示 + +```json + { + ... + "usingComponents": { + "zan-loading": "../../dist/loading/index" + } + ... + } +``` + +```html + + + +``` diff --git a/packages/loading/index.js b/packages/loading/index.js new file mode 100644 index 00000000..89fbaabe --- /dev/null +++ b/packages/loading/index.js @@ -0,0 +1,11 @@ +Component({ + properties: { + type: { + type: String, + value: 'circle' + }, + color: { + type: String + } + } +}) \ No newline at end of file diff --git a/packages/loading/index.json b/packages/loading/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/packages/loading/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/packages/loading/index.pcss b/packages/loading/index.pcss new file mode 100644 index 00000000..b3ec5f78 --- /dev/null +++ b/packages/loading/index.pcss @@ -0,0 +1,175 @@ +$spinners: 12; + +.loading.inline { + position: relative; + margin: 15px; + text-align: center; + display: flex; + justify-content: center; + + & .circle { + display: inline-block; + height: 24px; + width: 24px; + border-radius: 100%; + border: 3px solid transparent; + box-sizing: border-box; + border-color: rgba(0, 0, 0, .1); + border-top-color: rgba(255, 255, 255, .7); + animation: loading 1s linear infinite; + } + &.black .circle { + border-color: #c9c9c9; + border-top-color: #666; + } + + & .circular { + display: inline-block; + height: 24px; + width: 24px; + animation: loading 2s linear infinite; + + &::after { + content: ''; + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + border: 3px solid transparent; + box-sizing: border-box; + animation: circular 2s ease infinite; + } + } + + & .spinner { + width: 30px; + height: 30px; + display: inline-block; + position: relative; + animation: loading 1s linear infinite; + animation-timing-function: steps(12); + & view { + width: 100%; + height: 100%; + position: absolute; + text-align: center; + top: 0; + left: 0; + + &::after { + content: ''; + background: #fff; + height: 25%; + display: block; + width: 2px; + border-radius: 2px; + margin: 0 auto; + } + + @for $i from 1 to $spinners { + &:nth-child($i) { + transform: rotate(calc($i * 30)deg); + opacity: calc(1 / ($spinners + 2) * ($spinners - $i)); + } + } + } + } + &.black .spinner view::after { + content: ''; + background: #c9c9c9; + height: 25%; + display: block; + width: 2px; + border-radius: 2px; + margin: 0 auto; + } +} + +.loading.block { + & .dot-spinner { + margin: 15px 15px; + overflow: hidden; + + & view { + width: 8px; + height: 8px; + border-radius: 8px; + background: #fff; + display: inline-block; + margin-left: 3px; + position: relative; + left: 0; + + animation: dot-spinner 2s ease infinite; + @for $i from 1 to 6 { + &:nth-child($i) { + animation-delay: calc((6 - $i)/10)s; + } + } + @for $i from 6 to $spinners { + &:nth-child($i) { + display: none; + } + } + } + } + + &.black .dot-spinner view { + background: #c9c9c9; + } +} + + +@keyframes dot-spinner { + 40% { + left: calc(50% - 15px); + } + + 60% { + left: calc(50% - 15px); + } + + 100% { + left: 100%; + } +} + +@keyframes circular { + 0% { + border-color: #fff; + } + 12% { + border-top-color: transparent; + } + 25% { + border-right-color: transparent; + } + 37% { + border-bottom-color: transparent; + } + 50% { + border-left-color: transparent; + } + 64% { + border-top-color: #fff + } + 75% { + border-right-color: #fff; + } + 87.5% { + border-bottom-color: #fff; + } + 100% { + border-color: #fff; + } +} + +@keyframes loading { + 0% { + transform: rotate(0deg) + } + + 100% { + transform: rotate(360deg) + } +} diff --git a/packages/loading/index.wxml b/packages/loading/index.wxml new file mode 100644 index 00000000..641501ff --- /dev/null +++ b/packages/loading/index.wxml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file