From 0908bd4485447d0d1510a37e1f5bdf09cc697eca Mon Sep 17 00:00:00 2001 From: xdSi <3450236968@qq.com> Date: Sun, 29 Dec 2019 13:55:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9ELoading=E5=8A=A8?= =?UTF-8?q?=E7=94=BB,=20=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-zh-Hans.md | 2 + README.md | 2 + src/components/DiamondLoading/index.js | 86 ++++++++++++++++++++++++++ src/components/EatLoading/index.js | 58 +++++++++++++++++ src/components/index.js | 2 + src/stories/DiamonLoading.stories.js | 27 ++++++++ src/stories/EatLoading.stories.js | 27 ++++++++ src/stories/compoment/DemoContainer.js | 77 +++++++++++++---------- src/stories/compoment/style.scss | 75 ++++++++++++---------- 9 files changed, 290 insertions(+), 66 deletions(-) create mode 100644 src/components/DiamondLoading/index.js create mode 100644 src/components/EatLoading/index.js create mode 100644 src/stories/DiamonLoading.stories.js create mode 100644 src/stories/EatLoading.stories.js diff --git a/README-zh-Hans.md b/README-zh-Hans.md index 214fab5..fdc9f1c 100644 --- a/README-zh-Hans.md +++ b/README-zh-Hans.md @@ -81,6 +81,8 @@ import { BoxLoading } from 'react-loadingg'; | PassThrouthLoading | ✅ | ✅ | ✅ | ✅ | | CoffeeLoading | ✅ | ✅ | ✅ | ✅ | | BatteryLoading | ✅ | ✅ | ✅ | ✅ | +| DiamonLoading | ✅ | ✅ | 🔨 | ✅ | +| EatLoading | ✅ | ✅ | 🔨 | ✅ | #### ⌨️ 组件开发 首次运行项目 diff --git a/README.md b/README.md index 65c73ab..b8649b3 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,8 @@ import { BoxLoading } from 'react-loadingg'; | PassThrouthLoading | ✅ | ✅ | ✅ | ✅ | | CoffeeLoading | ✅ | ✅ | ✅ | ✅ | | BatteryLoading | ✅ | ✅ | ✅ | ✅ | +| DiamonLoading | ✅ | ✅ | 🔨 | ✅ | +| EatLoading | ✅ | ✅ | 🔨 | ✅ | #### ⌨️ Participate in development Running the project for the first time diff --git a/src/components/DiamondLoading/index.js b/src/components/DiamondLoading/index.js new file mode 100644 index 0000000..f4b88ce --- /dev/null +++ b/src/components/DiamondLoading/index.js @@ -0,0 +1,86 @@ +import React from 'react'; +import styled, { keyframes } from 'styled-components'; +import { commonStyle, sizeItem } from '../utils/style'; + +const load = keyframes` + 0% { + top: 19px; + left: 19px; +} + 100% { +} +`; + +const Container = styled.div` + position: relative; + width: 60px; + height: 60px; + border-radius: 50%; + margin: 75px; + display: inline-block; + vertical-align: middle; +`; + +const ItemDiv = styled.div` + position: absolute; + animation: ${load} ${props => props.speed || 1}s ease alternate infinite; + transform: scale(0.2); + &::before { + position: absolute; + content: ''; + left: 50px; + top: 0; + width: 50px; + height: 80px; + background: ${props => props.color || '#00adb5'} ; + border-radius: 50px 50px 0 0; + transform: rotate(-45deg); + transform-origin: 0 100%; + } + &::after { + position: absolute; + content: ''; + left: 50px; + top: 0; + width: 50px; + height: 80px; + background:${props => props.color || '#00adb5'} ; + border-radius: 50px 50px 0 0; + left: 0; + transform: rotate(45deg); + transform-origin: 100% 100%; + } +`; + +const ItemFirst = styled(ItemDiv)` + top: 0; + left: 30px; +`; + +const ItemTwo = styled(ItemDiv)` + left: 60px; + top: 30px; +`; + +const ItemThree = styled(ItemDiv)` + top: 60px; + left: 30px; +`; + +const ItemFour = styled(ItemDiv)` + left: 0; + top: 30px; +`; + +const DiamonLoading = ({ style = commonStyle, speed, color }) => { + return ( + + + + + + + ); +}; + +export default DiamonLoading; diff --git a/src/components/EatLoading/index.js b/src/components/EatLoading/index.js new file mode 100644 index 0000000..beb4146 --- /dev/null +++ b/src/components/EatLoading/index.js @@ -0,0 +1,58 @@ +import React from 'react'; +import styled, { keyframes } from 'styled-components'; +import { commonStyle, sizeItem } from '../utils/style'; + +const load = keyframes` + 0% { + transform: rotate(0deg); +} + 100% { + transform: rotate(-360deg); +} +`; + +const Container = styled.div` + position: absolute; + width: 60px; + height: 60px; + border-radius: 50%; + margin: 75px; + display: inline-block; + vertical-align: middle; + border: 8px dotted ${props => props.color || '#00adb5'} ; + transition: all 1s ease; + animation: ${load} ${props => props.speed || 1}s linear infinite; + border-bottom-width: 1px; + border-bottom-color: ${props => props.color || '#00adb5'} ; + border-left-width: 2px; + border-left-color: ${props => props.color || '#00adb5'} ; + border-top-width: 3px; + border-right-width: 4px; + border-top-color: ${props => props.color || '#00adb5'} ; +`; + +const ItemDiv = styled.div` + position: absolute; + top: 45px; + left: 25px; + width: 0px; + height: 0px; + border-right: 12px solid transparent; + border-top: 12px solid ${props => props.color || '#00adb5'} ; + border-left: 12px solid ${props => props.color || '#00adb5'} ; + border-bottom: 12px solid ${props => props.color || '#00adb5'} ; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +`; + +const EatLoading = ({ style = commonStyle, speed, color }) => { + return ( + + + + ); +}; + +export default EatLoading; diff --git a/src/components/index.js b/src/components/index.js index a34ae4f..5f9fde4 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -28,3 +28,5 @@ export { default as ThreeHorseLoading } from './ThreeHorseLoading'; export { default as PassThrouthLoading } from './PassThrouthLoading' export { default as CoffeeLoading } from './CoffeeLoading' export { default as BatteryLoading } from './BatteryLoading' +export { default as EatLoading } from './EatLoading' +export { default as DiamonLoading } from './DiamondLoading' diff --git a/src/stories/DiamonLoading.stories.js b/src/stories/DiamonLoading.stories.js new file mode 100644 index 0000000..9ab5b24 --- /dev/null +++ b/src/stories/DiamonLoading.stories.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withKnobs, number, text, radios } from '@storybook/addon-knobs'; +import { DiamonLoading } from '~/components'; +import Container from './compoment/Container'; +storiesOf('DiamonLoading', module) + .addDecorator(withKnobs) + .add('DiamonLoading', () => { + let speed = 1; + let color = ''; + speed = number('动画速度(s)') + color = text('颜色') + // let size = radios( + // '动画尺寸', + // { + // 'small': 'small', + // 'default': 'default', + // 'large': 'large' + // }, + // 'default' + // ); + return ( + + + + ); + }); diff --git a/src/stories/EatLoading.stories.js b/src/stories/EatLoading.stories.js new file mode 100644 index 0000000..3e724fa --- /dev/null +++ b/src/stories/EatLoading.stories.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withKnobs, number, text, radios } from '@storybook/addon-knobs'; +import { EatLoading } from '~/components'; +import Container from './compoment/Container'; +storiesOf('EatLoading', module) + .addDecorator(withKnobs) + .add('EatLoading', () => { + let speed = 1; + let color = ''; + speed = number('动画速度(s)') + color = text('颜色') + // let size = radios( + // '动画尺寸', + // { + // 'small': 'small', + // 'default': 'default', + // 'large': 'large' + // }, + // 'default' + // ); + return ( + + + + ); + }); diff --git a/src/stories/compoment/DemoContainer.js b/src/stories/compoment/DemoContainer.js index 245d428..85a0cb2 100644 --- a/src/stories/compoment/DemoContainer.js +++ b/src/stories/compoment/DemoContainer.js @@ -29,7 +29,9 @@ import { ThreeHorseLoading, PassThrouthLoading, BatteryLoading, - CoffeeLoading + CoffeeLoading, + DiamonLoading, + EatLoading } from '~/components'; import './style.scss'; @@ -101,95 +103,104 @@ const DemoContainer = () => {
setName('CommonLoading')}> - +
setName('NineCellLoading')}> - +
setName('BlockLoading')}> - +
setName('BabelLoading')}> - +
setName('CircleToBlockLoading')}> - +
setName('LoopCircleLoading')}> - +
setName('WindMillLoading')}> - +
setName('BoxLoading')}> - +
setName('DisappearedLoading')}> - +
setName('TouchBallLoading')}> - +
setName('TransverseLoading')}> - +
setName('WaveLoading')}> - +
setName('WaveTopBottomLoading')}> - +
setName('CircleLoading')}> - +
setName('BlockReserveLoading')}> - +
setName('JumpCircleLoading')}> - +
setName('MeteorRainLoading')}> - +
setName('RotateCircleLoading')}> - +
setName('StickyBallLoading')}> - +
setName('SemipolarLoading')}> - +
setName('SolarSystemLoading')}> - +
setName('LadderLoading')}> - +
setName('HeartBoomLoading')}> - +
setName('RollBoxLoading')}> - +
setName('RectGraduallyShowLoading')}> - +
setName('PointSpreadLoading')}> - +
setName('ThreeHorseLoading')}> - +
setName('PassThrouthLoading')}> - +
-
setName('ThreeHorseLoading')}> - +
setName('BatteryLoading')}> +
-
setName('PassThrouthLoading')}> - +
setName('CoffeeLoading')}> + +
+
setName('DiamonLoading')}> + +
+
setName('EatLoading')}> + +
+
+ {/* */}
diff --git a/src/stories/compoment/style.scss b/src/stories/compoment/style.scss index c08cd51..1484a66 100644 --- a/src/stories/compoment/style.scss +++ b/src/stories/compoment/style.scss @@ -3,8 +3,14 @@ body { } @keyframes hideIndex { - 0%{ opacity: 0; transform: translate(0, 50px) } - 100%{opacity: 1; transform: translate(0, 0) } + 0% { + opacity: 0; + transform: translate(0, 50px); + } + 100% { + opacity: 1; + transform: translate(0, 0); + } } .demo-container { @@ -23,20 +29,20 @@ body { height: 300px; position: fixed; animation: hideIndex 0.3s; - background:rgba(29,29,66,0.5); + background: rgba(29, 29, 66, 0.5); top: 0; right: 0; left: 0; bottom: 0; margin: auto; z-index: 9999; - b:nth-of-type(1){ + b:nth-of-type(1) { color: #fff; position: relative; top: 20px; left: 20px; } - b:nth-of-type(2){ + b:nth-of-type(2) { color: #fff; position: absolute; top: 20px; @@ -52,23 +58,23 @@ body { margin: 16px auto; > div:nth-of-type(1) { color: snow; - text-align: left; - padding: 10px; + text-align: left; + padding: 10px; } > div:nth-of-type(2) { color: paleturquoise; - text-align: left; - padding: 10px; + text-align: left; + padding: 10px; } > div:nth-of-type(3) { color: springgreen; - text-align: left; - padding: 10px; + text-align: left; + padding: 10px; } > div:nth-of-type(4) { color: salmon; - text-align: left; - padding: 10px; + text-align: left; + padding: 10px; } } } @@ -82,7 +88,7 @@ body { > div:nth-of-type(1) { width: 100px; height: 60px; - color: #FFF; + color: #fff; line-height: 60px; font-size: 1.4rem; font-family: Arial, Helvetica, sans-serif; @@ -107,7 +113,7 @@ body { > div:nth-of-type(2) { width: 100px; height: 60px; - color: #FFF; + color: #fff; line-height: 60px; font-size: 1.4rem; font-family: Arial, Helvetica, sans-serif; @@ -127,7 +133,7 @@ body { > div:nth-of-type(3) { width: 100px; height: 60px; - color: #FFF; + color: #fff; margin: auto; position: absolute; right: 20%; @@ -141,7 +147,7 @@ body { background: #fff; } img:hover { - animation: animate 3s linear infinite ; + animation: animate 3s linear infinite; filter: opacity(50%); } } @@ -170,41 +176,44 @@ body { min-height: 500px; margin-left: 10%; display: flex; - justify-content: flex-start; - align-items: flex-start; + justify-content: space-between; + align-items: center; flex-wrap: wrap; .item { - width: 20%; - height: 150px; + width: 32%; + height: 200px; position: relative; + background: #080915; + border-radius: 5px; + margin-bottom: 30px; + // box-shadow: 0px 0px 30px 1px #5d5b6a inset; + box-shadow: 0px 0px 30px 1px #4a47a3 inset; + + } .item:hover { - background: #18193a; } } } - - ::-webkit-scrollbar-track-piece { - background-color:#090a1f; - border-left:1px solid #090a1f; + background-color: #090a1f; + border-left: 1px solid #090a1f; border-radius: 10px; } ::-webkit-scrollbar { - width:1px; - height:1px; + width: 1px; + height: 1px; } ::-webkit-scrollbar-thumb { - background-color:#090a1f; - background-clip:padding-box; - border:1px solid #090a1f; + background-color: #090a1f; + background-clip: padding-box; + border: 1px solid #090a1f; border-radius: 10px; - min-height:2px; + min-height: 2px; } - @keyframes animate { to { transform: rotate(360deg);