СоХабр закрыт.
С 13.05.2019 изменения постов больше не отслеживаются, и новые посты не сохраняются.
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>
комментарии (6)