react-loadmask
loading mask for react
Getting Started
Install it via npm:
npm install react-loadmask
And include in your project:
Add this style to you css/scss
.loading-center { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; font-size: 32px; color: #888;} #circularG{ position:relative; width:33px; height:33px; margin: auto;} .circularG{ position:absolute; background-color:rgb(136,136,136); width:8px; height:8px; border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; animation-name:bounce_circularG; -o-animation-name:bounce_circularG; -ms-animation-name:bounce_circularG; -webkit-animation-name:bounce_circularG; -moz-animation-name:bounce_circularG; animation-duration:0.338s; -o-animation-duration:0.338s; -ms-animation-duration:0.338s; -webkit-animation-duration:0.338s; -moz-animation-duration:0.338s; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-direction:normal; -o-animation-direction:normal; -ms-animation-direction:normal; -webkit-animation-direction:normal; -moz-animation-direction:normal;} #circularG_1{ left:0; top:13px; animation-delay:0.128s; -o-animation-delay:0.128s; -ms-animation-delay:0.128s; -webkit-animation-delay:0.128s; -moz-animation-delay:0.128s;} #circularG_2{ left:3px; top:3px; animation-delay:0.164s; -o-animation-delay:0.164s; -ms-animation-delay:0.164s; -webkit-animation-delay:0.164s; -moz-animation-delay:0.164s;} #circularG_3{ top:0; left:13px; animation-delay:0.21s; -o-animation-delay:0.21s; -ms-animation-delay:0.21s; -webkit-animation-delay:0.21s; -moz-animation-delay:0.21s;} #circularG_4{ right:3px; top:3px; animation-delay:0.256s; -o-animation-delay:0.256s; -ms-animation-delay:0.256s; -webkit-animation-delay:0.256s; -moz-animation-delay:0.256s;} #circularG_5{ right:0; top:13px; animation-delay:0.292s; -o-animation-delay:0.292s; -ms-animation-delay:0.292s; -webkit-animation-delay:0.292s; -moz-animation-delay:0.292s;} #circularG_6{ right:3px; bottom:3px; animation-delay:0.338s; -o-animation-delay:0.338s; -ms-animation-delay:0.338s; -webkit-animation-delay:0.338s; -moz-animation-delay:0.338s;} #circularG_7{ left:13px; bottom:0; animation-delay:0.374s; -o-animation-delay:0.374s; -ms-animation-delay:0.374s; -webkit-animation-delay:0.374s; -moz-animation-delay:0.374s;} #circularG_8{ left:3px; bottom:3px; animation-delay:0.42s; -o-animation-delay:0.42s; -ms-animation-delay:0.42s; -webkit-animation-delay:0.42s; -moz-animation-delay:0.42s;} @keyframes bounce_circularG{ 0%{ transform:scale(1); } 100%{ transform:scale(.3); }} @-o-keyframes bounce_circularG{ 0%{ -o-transform:scale(1); } 100%{ -o-transform:scale(.3); }} @-ms-keyframes bounce_circularG{ 0%{ -ms-transform:scale(1); } 100%{ -ms-transform:scale(.3); }} @-webkit-keyframes bounce_circularG{ 0%{ -webkit-transform:scale(1); } 100%{ -webkit-transform:scale(.3); }} @-moz-keyframes bounce_circularG{ 0%{ -moz-transform:scale(1); } 100%{ -moz-transform:scale(.3); }}
import LoadMask from 'react-loadmask';
License
MIT