Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html, body {
- height: 100%;
- }
- body {
- background: -webkit-linear-gradient(0deg, #3f3f3f 10%, #202020 90%);
- background: linear-gradient(90deg, #3f3f3f 10%, #202020 90%);
- overflow: hidden;
- }
- .loader {
- height: 40px;
- width: 40px;
- position: absolute;
- left: 50%;
- margin-left: -20px;
- top: 50%;
- margin-top: -20px;
- }
- .loader:before,
- .loader:after {
- content: "";
- height: 40px;
- width: 40px;
- border: 8px solid rgba(255,255,255,.5);
- border-radius: 10px;
- position: absolute;
- top: 0;
- }
- .loader:before {
- -webkit-animation: animate 2s infinite linear;
- animation: animate 2s infinite linear;
- }
- @-webkit-keyframes animate {
- 0% {
- -webkit-transform: rotate(0) skew(0);
- transform: rotate(0) skew(0);
- }
- 100% {
- -webkit-transform: rotate(180deg) skew(360deg);
- transform: rotate(180deg) skew(360deg);
- }
- }
- @keyframes animate {
- 0% {
- -webkit-transform: rotate(0) skew(0);
- transform: rotate(0) skew(0);
- }
- 100% {
- -webkit-transform: rotate(180deg) skew(360deg);
- transform: rotate(180deg) skew(360deg);
- }
- }
- .loader:after {
- -webkit-animation: animate2 2s infinite linear;
- animation: animate2 2s infinite linear;
- }
- @-webkit-keyframes animate2 {
- 0% {
- -webkit-transform: rotate(0) skew(0);
- transform: rotate(0) skew(0);
- }
- 100% {
- -webkit-transform: rotate(-180deg) skew(-360deg);
- transform: rotate(-180deg) skew(-360deg);
- }
- }
- @keyframes animate2 {
- 0% {
- -webkit-transform: rotate(0) skew(0);
- transform: rotate(0) skew(0);
- }
- 100% {
- -webkit-transform: rotate(-180deg) skew(-360deg);
- transform: rotate(-180deg) skew(-360deg);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement