123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- body {
- font-family: sans-serif;
- font-size: 3em;
- color: #FFF;
- text-align: center;
- }
- .section {
- height: 500px;
- line-height: 500px;
- margin: auto;
- }
- .loader {
- display: inline-block;
- height: 50px;
- width: 50px;
- border-style: solid;
- border-width: 6px;
- border-radius: 50px;
- border-color: #FFF;
- vertical-align: middle;
- position: relative;
- }
- /*
- * Section 1
- */
- .section1 {
- background-color: #2cc36b;
- }
- .loader-quart {
- border-color: rgba(255, 255, 255, 0.6);
- }
- .loader-quart:after {
- content: '';
- border-color: transparent;
- border-top-color: #FFF;
- border-style: solid;
- border-radius: 50px;
- border-width: 6px;
- top: -6px;
- right: -6px;
- width: 50px;
- height: 50px;
- position: absolute;
- -webkit-animation: spin 1s linear infinite;
- animation: spin 1s linear infinite;
- }
- /*
- * Section 2
- */
- .section2 {
- background-color: #2980b9;
- }
- /*
- * Keyframe
- */
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- }
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
|