使用裁剪路径和动画梯度实现的React加载组件

React loader component with clip-path and animated gradient

react, loader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1433
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

var _React = React;
var PropTypes = _React.PropTypes;

var TIMER = 150;
var DEF_SIZE = 60;
var GUTTER = 5; // Spacing in percentage between tiles
var initialState = {

positions: {
        1: 'alpha',
        2: 'bravo',
        3: 'charlie',
        4: null,
        5: 'delta',
        6: 'echo',
        7: 'foxtrot'
    },
    stateNumber: 0
};

var Loader = function(_React$Component) {
    _inherits(Loader, _React$Component);

function Loader(props) {
        _classCallCheck(this, Loader);

var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

_this.state = initialState;
        _this.setNextState = _this.setNextState.bind(_this);
        return _this;
    }

Loader.prototype.componentDidMount = function componentDidMount() {
        this.setTimer(TIMER);
    };

Loader.prototype.setTimer = function setTimer(time) {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.timer = setInterval(this.setNextState, time);
    };

Loader.prototype.componentWillUnmount = function componentWillUnmount() {
        clearInterval(this.timer);
    };

Loader.prototype.clipPathForPosition = function clipPathForPosition(position) {
        position = parseInt(position, 10);
        var SIZE = (100 - 2 * GUTTER) / 3;
        var VAR0 = '0% ';
        var VAR1 = SIZE + GUTTER + '% ';
        var VAR2 = 2 * SIZE + 2 * GUTTER + '% ';
        switch (position) {
            case 1:
                return 'inset(' + VAR1 + VAR2 + VAR1 + VAR0 + ' round 5%)';
            case 2:
                return 'inset(' + VAR0 + VAR2 + VAR2 + VAR0 + ' round 5%)';
            case 3:
                return 'inset(' + VAR0 + VAR1 + VAR2 + VAR1 + ' round 5%)';
            case 4:
                return 'inset(' + VAR1 + VAR1 + VAR1 + VAR1 + ' round 5%)';
            case 5:
                return 'inset(' + VAR2 + VAR1 + VAR0 + VAR1 + ' round 5%)';
            case 6:
                return 'inset(' + VAR2 + VAR0 + VAR0 + VAR2 + ' round 5%)';
            case 7:
                return 'inset(' + VAR1 + VAR0 + VAR1 + VAR2 + ' round 5%)';
        }
    };

Loader.prototype.tileIndexToMove = function tileIndexToMove() {
        switch (this.state.stateNumber) {
            case 0:
                return 7;
            case 1:
                return 6;
            case 2:
                return 5;
            case 3:
                return 4;
            case 4:
                return 3;
            case 5:
                return 2;
            case 6:
                return 1;
            case 7:
                return 4;
        }
    };

Loader.prototype.positionForTile = function positionForTile(radioCommand) {
        for (var position in this.state.positions) {
            var tile = this.state.positions[position];
            if (tile === radioCommand) {
                return position;
            }
        }
    };

Loader.prototype.setNextState = function setNextState() {
        var _Object$assign;

var currentPositions = this.state.positions;
        var emptyIndex = this.positionForTile(null);
        var indexToMove = this.tileIndexToMove();
        var newPositions = Object.assign({}, currentPositions, (_Object$assign = {}, _Object$assign[indexToMove] = null, _Object$assign[emptyIndex] = currentPositions[indexToMove], _Object$assign));

var currentState = this.state.stateNumber;
        var nextState = currentState === 7 ? 0 : currentState + 1;

this.setState({
            stateNumber: nextState,
            positions: newPositions
        });
    };

Loader.prototype.renderTiles = function renderTiles() {
        var _this2 = this;

return ['alpha', 'bravo', 'charlie', 'delta', 'echo', 'foxtrot'].map(function(radioCommand) {
            var pos = _this2.positionForTile(radioCommand);
            var styles = {
                transition: TIMER / 1000 + 's ease-in-out',
                WebkitClipPath: _this2.clipPathForPosition(pos)
            };
            return React.createElement('div', {
                key: "rect-" + radioCommand,
                style: styles,
                className: "rect " + radioCommand
            });
        });
    };

Loader.prototype.render = function render() {
        var _props = this.props;
        var size = _props.size;
        var style = _props.style;
        var center = _props.center;

var styles = Object.assign({
            width: DEF_SIZE + 'px',
            height: DEF_SIZE + 'px'
        }, style);

if (size) {
            styles.width = size + 'px';
            styles.height = size + 'px';
        }

var className = "sw-loader__wrapper";
        if (center) {
            className += " sw-loader__wrapper--center";
        }

return React.createElement(
            'div', {
                style: styles,
                className: className
            },
            React.createElement(
                'div', {
                    className: 'sw-loader__holder'
                },
                this.renderTiles()
            )
        );
    };

return Loader;
}(React.Component);

var Container = function(_React$Component2) {
    _inherits(Container, _React$Component2);

function Container() {
        _classCallCheck(this, Container);

return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }

Container.prototype.render = function render() {
        var data = {
            size: 300
        };

return React.createElement(Loader, data);
    };

return Container;
}(React.Component);

ReactDOM.render(React.createElement(Container, null), document.getElementById('content'));

编译

CSS

*,
*:before,
*:after,
ul,
li,
a,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
image,
svg,
path,
g,
canvas {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    text-decoration: none;
    font-family: 'Roboto';
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    list-style: none;
    position: relative;
}
html,
body {
    width: 100%;
    height: inherit;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font-family: 'Roboto';
}
.sw-loader__wrapper {
    position: relative;
}
.sw-loader__wrapper--center {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.sw-loader__wrapper .sw-loader__holder {
    width: 70%;
    height: 70%;
    margin-left: 15%;
    margin-top: 15%;
    position: relative;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sw-loader__wrapper .sw-loader__holder .rect {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(left, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
    background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
    background-position: 0% 50%;
    background-size: 1000% 1000%;
    overflow: hidden;
    -webkit-animation: moveGradient 15s infinite;
    animation: moveGradient 15s infinite;
}
@-webkit-keyframes moveGradient {
    to {
        background-position: 100% 50%;
    }
}
@keyframes moveGradient {
    to {
        background-position: 100% 50%;
    }
}

HTML

React loader component with clip-path and animated gradient

react, loader

编辑器支持Emmet

快捷键

React loader component with clip-path and animated gradient

react, loader

使用React和RXJS实现的冒泡排序算法可视化动画

使用ReactJS和Mo.js实现的甩热狗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：