В сети встретил индикатор загрузки на 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 = ` @-webkit-keyframes "spin"{ from{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } to{ -webkit-transform:rotate(359deg); transform:rotate(359deg); } }`; } 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> ссылка на оригинал статьи https://habrahabr.ru/post/327558/
Добавить комментарий