1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- button {color: red;}
- p {margin-left: 20px;}
- .spinner {
- margin: 100px auto 0;
- width: 150px;
- text-align: center;
- height:300px;
- left:20%;
- z-index:21;
- }
-
- .spinner > div {
- width: 30px;
- height: 30px;
- background-color: #67CF22;
-
- border-radius: 100%;
- display: inline-block;
- -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
- animation: bouncedelay 1.4s infinite ease-in-out;
- /* Prevent first frame from flickering when animation starts */
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
-
- .spinner .bounce1 {
- -webkit-animation-delay: -0.32s;
- animation-delay: -0.32s;
- }
-
- .spinner .bounce2 {
- -webkit-animation-delay: -0.16s;
- animation-delay: -0.16s;
- }
-
- @-webkit-keyframes bouncedelay {
- 0%, 80%, 100% { -webkit-transform: scale(0.0) }
- 40% { -webkit-transform: scale(1.0) }
- }
-
- @keyframes bouncedelay {
- 0%, 80%, 100% {
- transform: scale(0.0);
- -webkit-transform: scale(0.0);
- } 40% {
- transform: scale(1.0);
- -webkit-transform: scale(1.0);
- }
- }
- #waiting{
- position: absolute;
- display:none;
- width:400px;
- height:300px;
- left:20%;
- top:15%;
- z-index:20;
- }
|