28.04.2017 09:55
aon24 5 489 Источник
В сети встретил индикатор загрузки на CSS. Перенес в React. Крутится :) 

import React from 'react';

class Loading extends React.Component {
	constructor(props) {
		super(props);
		this.style = {
		    margin: '10% auto',
		    borderBottom: '1px solid #8af',
		    borderLeft: '1px solid #8af',
		    borderRight: '5px solid #0af',
		    borderTop: '5px solid #0af',
		    borderRadius: '100%',
		    background: 'linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%)',
		    height: '80px',
		    width: '100px',
			animationName: 'spin',
			animationTimingFunction: 'linear',
			animationDuration: '2s',
			animationDelay: '0.0s',
			animationIterationCount: 'infinite',
			animationDirection: 'normal',
			animationFillMode: 'forwards'
		};
		this.keyframes = '@keyframes spin {to {transform: rotate(360deg);}}';
	}

	render() {
		let styleSheet = document.styleSheets[0];
		styleSheet.insertRule(this.keyframes, styleSheet.cssRules.length);
		return <div style={this.style}/>
	}
}

export default Loading

Оригинал из сети:

<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
div {
    margin:30px;
    height:100px;
    width:100px;
    border-radius:100%;
    background:fff;
    animation:spin 1.9s infinite linear;
 }
.loading1{
    border-bottom:12px solid #8af;
    border-left:12px solid #8af;
    border-right:0px solid #fff;
    border-top:0px solid #fff;
    }
.loading2{
    border-bottom:5px solid #8af;
    border-left:5px solid #8af;
    border-right:0px solid #fff;
    border-top:0px solid #fff;
    background: linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%);
    }
.loading3{
    border-bottom:5px solid #8af;
    border-left:5px solid #8af;
    border-right:1px solid #fff;
    border-top:1px solid #fff;
    background: linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%);
    height:50px;
    }  
.loading4{
    border-bottom:6px solid #8af;
    border-left:6px solid #8af;
    border-right:6px solid #fff;
    border-top:6px solid #fff;
    }     

@keyframes "spin"{
    from{-webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    to{
    -webkit-transform:rotate(359deg);
    -moz-transform:rotate(359deg);
    -o-transform:rotate(359deg);
    -ms-transform:rotate(359deg);
    transform:rotate(359deg);
    }
}
@-moz-keyframes spin{
    from{
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    to{
    -moz-transform:rotate(359deg);
    transform:rotate(359deg);
    }
}
@-webkit-keyframes "spin"{
    from{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    to{
    -webkit-transform:rotate(359deg);
    transform:rotate(359deg);
    }
}
@-ms-keyframes "spin"{
    from{
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);}
    to{-ms-transform:rotate(359deg);
    transform:rotate(359deg);
    }
}
@-o-keyframes "spin"{
    from{
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    }
    to{
    -o-transform:rotate(359deg);
    transform:rotate(359deg);
    }
}
</style>
</head>
<body>
<div class="loading1"></div>
<div class="loading2"></div>
<div class="loading3"></div>
<div class="loading4"></div>
</body>
</html>
Поделиться с друзьями
-->

Комментарии (5)


  1. seokirill
    28.04.2017 13:16
    #10195802
    +3

    Мобильное приложение почему-то не грузит статью, виду только 2 сниппета кода. У кого-то есть такая необходимость проблема?


    1. aon24
      28.04.2017 13:28
      #10195840

      там, кроме кода ничего нет :)


  1. bustEXZ
    28.04.2017 13:34
    #10195852
    +2

    Ваш «очень простой», как то слишком сложно выглядит. У себя реализовывал примерно так: https://codepen.io/bustexz/pen/MmppZa. И где нужно по месту у меня был Spinner который рендерил див. И по условию асинхронности он либо выводился либо нет. Ну и находится он должен конечно в контейнере с relative позиционированием, но это управляется уже программистом, кто как хочет так и выводит


  1. aon24
    28.04.2017 13:51
    #10195908

    Согласен, у Вас @keyframes изящней. В остальном почти то же самое. Я хотел показать, как в React управлять анимацией.


  1. nullc0de
    28.04.2017 14:07
    #10195950

    Картина маслом: Как проехать из Москвы в Санкт-Петербург через суровый Челябинск… Непонятно зачем стили вставлять через react. Если можно изначально стили просто записать в css файл. Стили же статичные, а не динамически изменяемые.