增加依赖

FormInsertDiy/AffairPage/Detail.js

@@ -6,7 +6,7 @@ import router from 'umi/router';
 import { getToken } from '@/utils/authority';
 import config from '@/config/config';
 import { message, Modal, notification, Popconfirm } from "antd";
-
+import DetailOneStop from '@/webPublic/one_stop_public/DetailForAudit/IframeForDetail';
 window.iframeParentComponent = {
   Modal,
   message,
@@ -117,7 +117,8 @@ export default class Detail extends Component {
           </div>
         </Shell>
         <Shell>
-          <iframe
+          <DetailOneStop id={id}/>
+        {/*  <iframe
             src={iframeUrl}
             frameBorder={0}
             id='detailIframeId'
@@ -133,7 +134,7 @@ export default class Detail extends Component {
               overflowY: 'hidden',
               minHeight: '80vh',
             }}
-          />
+          />*/}
         </Shell>
         <Shell>
           <div

one_stop_public/DetailForAudit/DetailSplit.js

@@ -24,7 +24,7 @@ import { getToken } from '@/webPublic/one_stop_public/utils/token';
 import { connect } from 'dva';
 import { isEmpty } from 'lodash';
 import { openToast } from './components/Notification';
-import PortalFlowExamineModal from '@/pages/Portal/components/FlowExamineModal';
+import PortalFlowExamineModal from './components/FlowExamineModal';
 import BtnOk from '@/webPublic/one_stop_public/AffairButton/AuditButton/userTable';
 import ZdyTable from '@/webPublic/one_stop_public/Table';
 import moment from 'moment';
@@ -1028,13 +1028,13 @@ export default class GetDetail extends Component {
             <Spin size='large' />
           </div>
         )}
-        <PortalFlowExamineModal
+        <PortalFlowExamineModal // 流程图
           ref={node => (this.flowExamineModal = node)}
           affairId={id}
           id={appId}
           code={code}
         />
-        <TrunToModel
+        <TrunToModel //
           visible={isOpenTrunToModel}
           handleCancel={this.handleTrunToModel}
           status={trunToStatus}

one_stop_public/DetailForAudit/components/loadThree/style.less

+.ani6{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: rgba(0, 0, 0, 0.109);
+  }
+  .ani6 .wrap_preload {
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 1;
+    visibility: visible;
+    background: #fff;
+    width: 100%;
+    height: 100%;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  .ani6 .wrap_preload.circle_ball {
+    // background: rgba(0, 0, 0, 0.8);
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    width: 128px;
+    height: 128px;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .ball {
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    border-radius: 100%;
+    width: 16px;
+    height: 16px;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .ball.ball_top {
+    z-index: 1;
+    background: #009D2F;
+    -webkit-transform-origin: 64px 50%;
+    -moz-transform-origin: 64px 50%;
+    -ms-transform-origin: 64px 50%;
+    -o-transform-origin: 64px 50%;
+    transform-origin: 64px 50%;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-animation: ball-top 3s linear 0s infinite;
+    -moz-animation: ball-top 3s linear 0s infinite;
+    -ms-animation: ball-top 3s linear 0s infinite;
+    -o-animation: ball-top 3s linear 0s infinite;
+    animation: ball-top 3s linear 0s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .ball.ball_top:nth-of-type(2) {
+    background: #17B948;
+    width: 8px;
+    height: 8px;
+    -webkit-animation: ball-top 3s linear 0.6s infinite;
+    -moz-animation: ball-top 3s linear 0.6s infinite;
+    -ms-animation: ball-top 3s linear 0.6s infinite;
+    -o-animation: ball-top 3s linear 0.6s infinite;
+    animation: ball-top 3s linear 0.6s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .ball.ball_bot {
+    opacity: 0.4;
+    background: #F7AB03;
+    -webkit-transform-origin: 64px 50%;
+    -moz-transform-origin: 64px 50%;
+    -ms-transform-origin: 64px 50%;
+    -o-transform-origin: 64px 50%;
+    transform-origin: 64px 50%;
+    -webkit-transform: rotate(270deg);
+    -moz-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    -o-transform: rotate(270deg);
+    transform: rotate(270deg);
+    -webkit-animation: ball-bot 3s linear 0s infinite;
+    -moz-animation: ball-bot 3s linear 0s infinite;
+    -ms-animation: ball-bot 3s linear 0s infinite;
+    -o-animation: ball-bot 3s linear 0s infinite;
+    animation: ball-bot 3s linear 0s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .ball.ball_bot:nth-of-type(2) {
+    background: #FFC239;
+    width: 8px;
+    height: 8px;
+    -webkit-animation: ball-bot 3s linear 0.6s infinite;
+    -moz-animation: ball-bot 3s linear 0.6s infinite;
+    -ms-animation: ball-bot 3s linear 0.6s infinite;
+    -o-animation: ball-bot 3s linear 0.6s infinite;
+    animation: ball-bot 3s linear 0.6s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect {
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    left: -8px;
+    right: -8px;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect {
+    opacity: 0;
+    position: absolute;
+    border-radius: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    width: 32px;
+    height: 32px;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect:nth-of-type(2):before {
+    border: none;
+    background: rgba(255, 255, 255, 0.2);
+    width: 8px;
+    height: 8px;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    width: 16px;
+    height: 16px;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect.left {
+    left: 0;
+    -webkit-animation: circle-effect-left 3s linear 0s infinite;
+    -moz-animation: circle-effect-left 3s linear 0s infinite;
+    -ms-animation: circle-effect-left 3s linear 0s infinite;
+    -o-animation: circle-effect-left 3s linear 0s infinite;
+    animation: circle-effect-left 3s linear 0s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect.left:nth-of-type(2) {
+    top: 8px;
+    left: 4px;
+    width: 16px;
+    height: 16px;
+    -webkit-animation: circle-effect-left 3s linear 0.6s infinite;
+    -moz-animation: circle-effect-left 3s linear 0.6s infinite;
+    -ms-animation: circle-effect-left 3s linear 0.6s infinite;
+    -o-animation: circle-effect-left 3s linear 0.6s infinite;
+    animation: circle-effect-left 3s linear 0.6s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect.right {
+    right: 0;
+    -webkit-animation: circle-effect-right 3s linear 0s infinite;
+    -moz-animation: circle-effect-right 3s linear 0s infinite;
+    -ms-animation: circle-effect-right 3s linear 0s infinite;
+    -o-animation: circle-effect-right 3s linear 0s infinite;
+    animation: circle-effect-right 3s linear 0s infinite;
+  }
+  .ani6 .wrap_preload.circle_ball .wrap_content .wrap_circle_ball .wrap_effect .circle_effect.right:nth-of-type(2) {
+    top: 8px;
+    right: 4px;
+    width: 16px;
+    height: 16px;
+    -webkit-animation: circle-effect-right 3s linear 0.6s infinite;
+    -moz-animation: circle-effect-right 3s linear 0.6s infinite;
+    -ms-animation: circle-effect-right 3s linear 0.6s infinite;
+    -o-animation: circle-effect-right 3s linear 0.6s infinite;
+    animation: circle-effect-right 3s linear 0.6s infinite;
+  }
+  .ani6 .wrap_preload.hide_out {
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transform: scale(2);
+    -moz-transform: scale(2);
+    -ms-transform: scale(2);
+    -o-transform: scale(2);
+    transform: scale(2);
+  }
+  .ani6 .wrap_preload .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: none;
+    width: 100%;
+    height: 100%;
+  }
+  // 小球跳动加载动画
+@-webkit-keyframes ball-top {
+    0% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+    25% {
+      -webkit-transform: rotate(-13deg);
+      -moz-transform: rotate(-13deg);
+      -ms-transform: rotate(-13deg);
+      -o-transform: rotate(-13deg);
+      transform: rotate(-13deg);
+    }
+    75% {
+      -webkit-transform: rotate(193deg);
+      -moz-transform: rotate(193deg);
+      -ms-transform: rotate(193deg);
+      -o-transform: rotate(193deg);
+      transform: rotate(193deg);
+    }
+    100% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+  }
+  @-moz-keyframes ball-top {
+    0% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+    25% {
+      -webkit-transform: rotate(-13deg);
+      -moz-transform: rotate(-13deg);
+      -ms-transform: rotate(-13deg);
+      -o-transform: rotate(-13deg);
+      transform: rotate(-13deg);
+    }
+    75% {
+      -webkit-transform: rotate(193deg);
+      -moz-transform: rotate(193deg);
+      -ms-transform: rotate(193deg);
+      -o-transform: rotate(193deg);
+      transform: rotate(193deg);
+    }
+    100% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+  }
+  @-o-keyframes ball-top {
+    0% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+    25% {
+      -webkit-transform: rotate(-13deg);
+      -moz-transform: rotate(-13deg);
+      -ms-transform: rotate(-13deg);
+      -o-transform: rotate(-13deg);
+      transform: rotate(-13deg);
+    }
+    75% {
+      -webkit-transform: rotate(193deg);
+      -moz-transform: rotate(193deg);
+      -ms-transform: rotate(193deg);
+      -o-transform: rotate(193deg);
+      transform: rotate(193deg);
+    }
+    100% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+  }
+  @keyframes ball-top {
+    0% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+    25% {
+      -webkit-transform: rotate(-13deg);
+      -moz-transform: rotate(-13deg);
+      -ms-transform: rotate(-13deg);
+      -o-transform: rotate(-13deg);
+      transform: rotate(-13deg);
+    }
+    75% {
+      -webkit-transform: rotate(193deg);
+      -moz-transform: rotate(193deg);
+      -ms-transform: rotate(193deg);
+      -o-transform: rotate(193deg);
+      transform: rotate(193deg);
+    }
+    100% {
+      -webkit-transform: rotate(90deg);
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+  }
+  @-webkit-keyframes ball-bot {
+    0% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+    25% {
+      -webkit-transform: rotate(345deg);
+      -moz-transform: rotate(345deg);
+      -ms-transform: rotate(345deg);
+      -o-transform: rotate(345deg);
+      transform: rotate(345deg);
+    }
+    75% {
+      -webkit-transform: rotate(195deg);
+      -moz-transform: rotate(195deg);
+      -ms-transform: rotate(195deg);
+      -o-transform: rotate(195deg);
+      transform: rotate(195deg);
+    }
+    100% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+  }
+  @-moz-keyframes ball-bot {
+    0% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+    25% {
+      -webkit-transform: rotate(345deg);
+      -moz-transform: rotate(345deg);
+      -ms-transform: rotate(345deg);
+      -o-transform: rotate(345deg);
+      transform: rotate(345deg);
+    }
+    75% {
+      -webkit-transform: rotate(195deg);
+      -moz-transform: rotate(195deg);
+      -ms-transform: rotate(195deg);
+      -o-transform: rotate(195deg);
+      transform: rotate(195deg);
+    }
+    100% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+  }
+  @-o-keyframes ball-bot {
+    0% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+    25% {
+      -webkit-transform: rotate(345deg);
+      -moz-transform: rotate(345deg);
+      -ms-transform: rotate(345deg);
+      -o-transform: rotate(345deg);
+      transform: rotate(345deg);
+    }
+    75% {
+      -webkit-transform: rotate(195deg);
+      -moz-transform: rotate(195deg);
+      -ms-transform: rotate(195deg);
+      -o-transform: rotate(195deg);
+      transform: rotate(195deg);
+    }
+    100% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+  }
+  @keyframes ball-bot {
+    0% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+    25% {
+      -webkit-transform: rotate(345deg);
+      -moz-transform: rotate(345deg);
+      -ms-transform: rotate(345deg);
+      -o-transform: rotate(345deg);
+      transform: rotate(345deg);
+    }
+    75% {
+      -webkit-transform: rotate(195deg);
+      -moz-transform: rotate(195deg);
+      -ms-transform: rotate(195deg);
+      -o-transform: rotate(195deg);
+      transform: rotate(195deg);
+    }
+    100% {
+      -webkit-transform: rotate(270deg);
+      -moz-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+      -o-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+  }
+  @-webkit-keyframes circle-effect-left {
+    0% {
+      opacity: 0;
+    }
+    24.99% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    40% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    45% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-moz-keyframes circle-effect-left {
+    0% {
+      opacity: 0;
+    }
+    24.99% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    40% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    45% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-o-keyframes circle-effect-left {
+    0% {
+      opacity: 0;
+    }
+    24.99% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    40% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    45% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes circle-effect-left {
+    0% {
+      opacity: 0;
+    }
+    24.99% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    40% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    45% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes circle-effect-right {
+    0% {
+      opacity: 0;
+    }
+    74.99% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    90% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    95% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-moz-keyframes circle-effect-right {
+    0% {
+      opacity: 0;
+    }
+    74.99% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    90% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    95% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-o-keyframes circle-effect-right {
+    0% {
+      opacity: 0;
+    }
+    74.99% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    90% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    95% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes circle-effect-right {
+    0% {
+      opacity: 0;
+    }
+    74.99% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 1;
+      border-color: rgba(255, 255, 255, 0.6);
+      -webkit-transform: scale(0.5);
+      -moz-transform: scale(0.5);
+      -ms-transform: scale(0.5);
+      -o-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+    90% {
+      border-color: rgba(255, 255, 255, 0);
+    }
+    95% {
+      opacity: 0;
+      border-color: rgba(255, 255, 255, 0);
+      -webkit-transform: scale(3, 1);
+      -moz-transform: scale(3, 1);
+      -ms-transform: scale(3, 1);
+      -o-transform: scale(3, 1);
+      transform: scale(3, 1);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
\ No newline at end of file