| /* |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. The |
| ASF licenses this file to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at . |
| http://www.apache.org/licenses/LICENSE-2.0 . Unless required by |
| applicable law or agreed to in writing, software distributed under the |
| License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES |
| OR CONDITIONS OF ANY KIND, either express or implied. See the License |
| for the specific language governing permissions and limitations under |
| the License. |
| */ |
| /* Spinner */ |
| .spinner { |
| z-index: 100; |
| position: fixed; |
| top: calc(40% - 90px); |
| left: calc(50% - 150px); |
| width: 360px; |
| height: 240px; |
| background: #3285BC88; |
| border-radius: 8px; |
| font-size: 9pt; |
| color: #FFF; |
| text-align: center; |
| font-family: sans-serif; |
| } |
| .spinwheel { |
| margin: 28px auto; |
| border-top: 10px solid rgba(30,190,200,0.95); |
| border-right: 10px solid rgba(220, 30, 120, 0.95); |
| border-bottom: 10px solid rgba(120, 200, 30, 0.95); |
| border-left: 10px solid rgba(220,190,30,0.95); |
| transform: translateZ(0); |
| animation: spin1 1s 0s ease-in-out, spin2 1s 1s ease-in-out, spin3 1s 2s ease-in-out, spin4 1s 3s ease-in-out, |
| spin1 1s 4s ease-in-out, spin2 1s 5s ease-in-out, spin3 1s 6s ease-in-out, spin4 1s 7s ease-in-out, |
| spin1 1s 8s ease-in-out, spin2 1s 9s ease-in-out, spin3 1s 10s ease-in-out, spin4 1s 11s ease-in-out, |
| spin1 1s 12s ease-in-out, spin2 1s 13s ease-in-out, spin3 1s 14s ease-in-out, spin4 1s 15s ease-in-out; |
| } |
| |
| .spinwheel, .spinwheel:after { |
| border-radius: 50%; |
| width: 100px; |
| height: 100px; |
| } |
| |
| .spinwheel_md { |
| margin: 10px 10px; |
| border-top: 10px solid rgba(30,190,200,0.95); |
| border-right: 10px solid rgba(220, 30, 120, 0.95); |
| border-bottom: 10px solid rgba(120, 200, 30, 0.95); |
| border-left: 10px solid rgba(220,190,30,0.95); |
| } |
| |
| .spinwheel_md, .spinwheel_md:after { |
| border-radius: 50%; |
| width: 60px; |
| height: 60px; |
| } |
| |
| .spinwheel_sm { |
| margin: 10px 10px; |
| border-top: 20px solid rgba(30,190,200,0.95); |
| border-right: 20px solid rgba(220, 30, 120, 0.95); |
| border-bottom: 20px solid rgba(120, 200, 30, 0.95); |
| border-left: 20px solid rgba(220,190,30,0.95); |
| } |
| |
| .spinwheel_sm, .spinwheel_sm:after { |
| border-radius: 50%; |
| width: 0px; |
| height: 0px; |
| } |
| |
| @keyframes spin1 { |
| 0% { |
| transform: rotate(0deg); |
| } |
| |
| 100% { |
| transform: rotate(450deg); |
| } |
| } |
| |
| @keyframes spin2 { |
| 0% { |
| transform: rotate(90deg); |
| } |
| |
| 100% { |
| transform: rotate(540deg); |
| } |
| } |
| @keyframes spin3 { |
| 0% { |
| transform: rotate(180deg); |
| } |
| |
| 100% { |
| transform: rotate(630deg); |
| } |
| } |
| @keyframes spin4 { |
| 0% { |
| transform: rotate(270deg); |
| } |
| |
| 100% { |
| transform: rotate(720deg); |
| } |
| } |