123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <view>
- <view class="loading">
- <view class="dot white"></view>
- <view class="dot" :class="bg1"></view>
- <view class="dot" :class="bg2"></view>
- <view class="dot" :class="bg3"></view>
- <view class="dot" :class="bg4"></view>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- name:"loading",
- props:{
- bg1:{
- type:String,
- default:'bg-red',
- },
- bg2:{
- type:String,
- default:'bg-yellow',
- },
- bg3:{
- type:String,
- default:'bg-olive',
- },
- bg4:{
- type:String,
- default:'bg-cyan',
- }
- },
- data() {
- return {
-
- };
- }
- }
- </script>
-
- <style>
- .loading {
- position: fixed;
- margin: auto;
- top: 0; bottom: 0; left: 0; right: 0;
- width: 6.250em; height: 6.250em;
- animation: rotate 2.4s linear infinite;
- z-index: 999;
- }
- .white {
- top: 0; bottom: 0; left: 0; right: 0;
- background: white;
- animation: flash 2.4s linear infinite;
- opacity: 0;
- }
- .dot {
- position: absolute;
- margin: auto;
- width: 2.4em; height: 2.4em;
- border-radius: 100%;
- transition: all 1s ease;
- }
- .dot:nth-child(2) { top: 0; bottom: 0; left: 0; animation: dotsY 2.4s linear infinite; }
- .dot:nth-child(3) { left: 0; right: 0; top: 0; animation: dotsX 2.4s linear infinite; }
- .dot:nth-child(4) { top: 0; bottom: 0; right: 0; animation: dotsY 2.4s linear infinite; }
- .dot:nth-child(5) { left: 0; right: 0; bottom: 0; animation: dotsX 2.4s linear infinite; }
-
- @keyframes rotate {
- 0% { transform: rotate( 0 ); }
- 10% { width: 6.250em; height: 6.250em; }
- 66% { width: 2.4em; height: 2.4em; }
- 100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
- }
-
- @keyframes dotsY {
- 66% { opacity: .1; width: 2.4em; }
- 77%{ opacity: 1; width: 0; }
- }
- @keyframes dotsX {
- 66% { opacity: .1; height: 2.4em;}
- 77%{ opacity: 1; height: 0; }
- }
-
- @keyframes flash {
- 33% { opacity: 0; border-radius: 0%; }
- 55%{ opacity: .6; border-radius: 100%; }
- 66%{ opacity: 0; }
- }
- </style>
|