.loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; display: flex; align-items: center; justify-content: center; } .back { padding: 0.4rem 0.4rem; background: #fb7299; display: flex; align-items: center; justify-content: center; border-radius: 0.16rem; max-width: 4rem; } .back span { font-size: 0.3rem; letter-spacing: 0.02rem; color: #fff; } .load8 { width: 0.8rem; height: 0.8rem; position: relative; } .dialog_f { width: 86%; background: #fff; border-radius: 0.32rem; font-size: 0.32rem; } .dialog_header { padding-top: 0.52rem; font-weight: 500; line-height: 0.48rem; text-align: center; } .dialog_message { max-height: 60vh; padding: 0.16rem 0.48rem 0.52rem 0.48rem; overflow-y: auto; font-size: 0.28rem; line-height: 0.4rem; text-align: center; } .dialog_footer { display: flex; height: 0.96rem; border-top: 0.02rem solid #ebedf0; } .dialog_cancel, .dialog_confirm { width: 50%; text-align: center; line-height: 0.96rem; } .dialog_cancel:active { background: #e6e6e6; border-bottom-left-radius: 0.32rem; } .dialog_confirm:active { background: #e6e6e6; border-bottom-right-radius: 0.32rem; } .dialog_cancel { color: #323233; border-right: 0.02rem solid #ebedf0; } .dialog_confirm { color: #fb7299; } .container1>div, .container2>div, .container3>div { width: 0.2rem; height: 0.2rem; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .load8 .load8-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-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); } }