zeroModal.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970
  1. /*!
  2. * zeroModal.js
  3. * http://git.oschina.net/cylansad/zeroModal
  4. *
  5. * Copyright 2016, Sad
  6. */
  7. .zeromodal-overlay {
  8. width: 100%;
  9. height: 1000px;
  10. position: absolute;
  11. z-index: 1000;
  12. opacity: 0.2;
  13. background-color: rgba(0, 0, 0, .9);
  14. top: 0;
  15. left: 0;
  16. }
  17. .zeromodal-loading1 {
  18. background: url(./img/loading1.gif);
  19. width: 50px;
  20. height: 50px;
  21. position: absolute;
  22. left: 50%;
  23. top: 35%;
  24. }
  25. .zeromodal-loading2 {
  26. background: url(./img/loading2.gif);
  27. width: 37px;
  28. height: 37px;
  29. position: absolute;
  30. left: 50%;
  31. top: 35%;
  32. }
  33. .zeromodal-container {
  34. font-family: "Hiragino Sans GB", "Microsoft YaHei", Arial-normal, "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  35. position: absolute;
  36. box-shadow: 0 6px 24px rgba(0, 0, 0, .24);
  37. border-radius: 5px;
  38. border: none;
  39. background-color: #fff;
  40. z-index: 1001;
  41. padding: 19px 16px;
  42. }
  43. .zeromodal-header {
  44. margin-top: 4px;
  45. margin-bottom: 18px;
  46. color: #666;
  47. font-weight: bold;
  48. font-size: 14px;
  49. }
  50. .zeromodal-progress-content {
  51. position: absolute;
  52. left: 46%;
  53. font-size: 13px;
  54. color: #4FAB1C;
  55. }
  56. .zeromodal-body {
  57. font-size: 12px;
  58. color: #333;
  59. /*overflow-y: auto;*/
  60. }
  61. .zeromodal-frame {
  62. width: 100%;
  63. height: 100%;
  64. border: 0;
  65. }
  66. .zeromodal-btn {
  67. margin-bottom: 0;
  68. text-align: center;
  69. font-size: 14px;
  70. outline: none;
  71. display: inline-block;
  72. margin-left: 4px;
  73. font-weight: 400;
  74. -ms-touch-action: manipulation;
  75. touch-action: manipulation;
  76. cursor: pointer;
  77. background-image: none;
  78. border: 1px solid transparent;
  79. white-space: nowrap;
  80. padding: 6px 8px;
  81. line-height: 20px;
  82. border-radius: 1px;
  83. min-width: 80px;
  84. box-shadow: 0 1px 4px rgba(0, 0, 0, .32);
  85. -webkit-transition: all;
  86. transition: all;
  87. -webkit-transition-duration: .3s;
  88. transition-duration: .3s;
  89. }
  90. .zeromodal-btn:hover {
  91. box-shadow: 0 3px 4px rgba(0, 0, 0, .32);
  92. }
  93. .zeromodal-btn-primary {
  94. color: #fff;
  95. background-color: #2196f3;
  96. border: none;
  97. }
  98. .zeromodal-btn-default {
  99. color: #333;
  100. background-color: #fff;
  101. border: none;
  102. padding: 6px 8px;
  103. }
  104. .zeromodal-max {
  105. background: url(./img/max.png);
  106. width: 16px;
  107. height: 16px;
  108. position: relative;
  109. float: right;
  110. margin-right: 2px;
  111. top: -4px;
  112. cursor: pointer;
  113. opacity: .3;
  114. -webkit-transition: -webkit-transform 0.4s ease-out;
  115. -moz-transition: -moz-transform 0.4s ease-out;
  116. -o-transition: -o-transform 0.4s ease-out;
  117. -ms-transition: -ms-transform 0.4s ease-out;
  118. -moz-user-select: none;
  119. -webkit-user-select: none;
  120. }
  121. .zeromodal-max:hover {
  122. -webkit-transform: rotateZ(180deg);
  123. -moz-transform: rotateZ(180deg);
  124. -o-transform: rotateZ(180deg);
  125. -ms-transform: rotateZ(180deg);
  126. transform: rotateZ(180deg);
  127. }
  128. .zeromodal-close {
  129. position: relative;
  130. -webkit-appearance: none;
  131. padding: 0;
  132. cursor: pointer;
  133. background: 0 0;
  134. border: 0;
  135. top: -6px;
  136. outline: none;
  137. float: right;
  138. font-size: 21px;
  139. font-weight: 700;
  140. line-height: 1;
  141. color: #000;
  142. text-shadow: 0 1px 0 #fff;
  143. filter: alpha(opacity=20);
  144. opacity: .2;
  145. -webkit-border-radius: 110px;
  146. border-radius: 110px;
  147. -webkit-transition: -webkit-transform 0.4s ease-out;
  148. -moz-transition: -moz-transform 0.4s ease-out;
  149. -o-transition: -o-transform 0.4s ease-out;
  150. -ms-transition: -ms-transform 0.4s ease-out;
  151. -moz-user-select: none;
  152. -webkit-user-select: none;
  153. }
  154. .zeromodal-close:hover {
  155. -webkit-transform: rotateZ(180deg);
  156. -moz-transform: rotateZ(180deg);
  157. -o-transform: rotateZ(180deg);
  158. -ms-transform: rotateZ(180deg);
  159. transform: rotateZ(180deg);
  160. }
  161. .zeromodal-footer {
  162. position: absolute;
  163. bottom: 12px;
  164. width: 100%;
  165. left: 0px;
  166. }
  167. .zeromodal-line {
  168. border: none;
  169. border-top: 1px solid #efefef;
  170. margin-bottom: 10px;
  171. margin-left: auto;
  172. margin-right: auto;
  173. width: 97%
  174. }
  175. .zeromodal-btn-container {
  176. text-align: right;
  177. padding-right: 15px;
  178. }
  179. .zeromodal-icon {
  180. width: 80px;
  181. height: 80px;
  182. border: 4px solid #808080;
  183. border-radius: 50%;
  184. margin: 16px auto 16px;
  185. margin-top: 16px;
  186. padding: 0;
  187. position: relative;
  188. box-sizing: content-box;
  189. cursor: default;
  190. -webkit-touch-callout: none;
  191. -webkit-user-select: none;
  192. -moz-user-select: none;
  193. -ms-user-select: none;
  194. user-select: none;
  195. }
  196. .zeromodal-icon.zeromodal-icon-info {
  197. font-family: "Open Sans", sans-serif;
  198. color: #3fc3ee;
  199. border-color: #3fc3ee;
  200. font-size: 60px;
  201. line-height: 80px;
  202. text-align: center;
  203. }
  204. .zeromodal-icon.zeromodal-icon-question {
  205. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  206. color: #c9dae1;
  207. border-color: #c9dae1;
  208. font-size: 60px;
  209. line-height: 80px;
  210. text-align: center;
  211. }
  212. .zeromodal-error {
  213. border-color: #f27474;
  214. }
  215. .zeromodal-icon.zeromodal-error .x-mark {
  216. position: relative;
  217. display: block;
  218. }
  219. .zeromodal-icon.zeromodal-error .line.left {
  220. -webkit-transform: rotate(45deg);
  221. transform: rotate(45deg);
  222. left: 17px;
  223. }
  224. .zeromodal-icon.zeromodal-error .line {
  225. position: absolute;
  226. height: 5px;
  227. width: 47px;
  228. background-color: #f27474;
  229. display: block;
  230. top: 37px;
  231. border-radius: 2px;
  232. }
  233. .zeromodal-icon.zeromodal-error .line.right {
  234. -webkit-transform: rotate(-45deg);
  235. transform: rotate(-45deg);
  236. right: 16px;
  237. }
  238. .zeromodal-icon.zeromodal-success {
  239. border: 0px;
  240. background: url(zeromodal_success.png) no-repeat center;
  241. }
  242. .zeromodal-icon.zeromodal-success::before {
  243. border-radius: 120px 0 0 120px;
  244. top: -7px;
  245. left: -33px;
  246. -webkit-transform: rotate(-45deg);
  247. transform: rotate(-45deg);
  248. -webkit-transform-origin: 60px 60px;
  249. transform-origin: 60px 60px;
  250. }
  251. .zeromodal-icon.zeromodal-success::after {
  252. border-radius: 0 120px 120px 0;
  253. top: -11px;
  254. left: 30px;
  255. -webkit-transform: rotate(-45deg);
  256. transform: rotate(-45deg);
  257. -webkit-transform-origin: 0 60px;
  258. transform-origin: 0 60px;
  259. }
  260. .zeromodal-icon.zeromodal-success .placeholder {
  261. width: 80px;
  262. height: 80px;
  263. border: 4px solid rgba(165, 220, 134, 0.2);
  264. border-radius: 50%;
  265. box-sizing: content-box;
  266. position: absolute;
  267. left: -4px;
  268. top: -4px;
  269. z-index: 2;
  270. }
  271. .zeromodal-icon.zeromodal-success .fix {
  272. width: 7px;
  273. height: 90px;
  274. background-color: #fff;
  275. position: absolute;
  276. left: 28px;
  277. top: 8px;
  278. z-index: 1;
  279. -webkit-transform: rotate(-45deg);
  280. transform: rotate(-45deg);
  281. }
  282. .zeromodal-icon.zeromodal-success .line {
  283. height: 5px;
  284. background-color: #a5dc86;
  285. display: block;
  286. border-radius: 2px;
  287. position: absolute;
  288. z-index: 2;
  289. }
  290. .zeromodal-icon.zeromodal-success .line.tip {
  291. width: 25px;
  292. left: 14px;
  293. top: 46px;
  294. -webkit-transform: rotate(45deg);
  295. transform: rotate(45deg);
  296. }
  297. .zeromodal-icon.zeromodal-success .line.long {
  298. width: 47px;
  299. right: 8px;
  300. top: 38px;
  301. -webkit-transform: rotate(-45deg);
  302. transform: rotate(-45deg);
  303. }
  304. @-webkit-keyframes showZeroAlert {
  305. 0% {
  306. -webkit-transform: scale(0.7);
  307. transform: scale(0.7);
  308. }
  309. 45% {
  310. -webkit-transform: scale(1.05);
  311. transform: scale(1.05);
  312. }
  313. 80% {
  314. -webkit-transform: scale(0.95);
  315. transform: scale(0.95);
  316. }
  317. 100% {
  318. -webkit-transform: scale(1);
  319. transform: scale(1);
  320. }
  321. }
  322. @keyframes showZeroAlert {
  323. 0% {
  324. -webkit-transform: scale(0.7);
  325. transform: scale(0.7);
  326. }
  327. 45% {
  328. -webkit-transform: scale(1.05);
  329. transform: scale(1.05);
  330. }
  331. 80% {
  332. -webkit-transform: scale(0.95);
  333. transform: scale(0.95);
  334. }
  335. 100% {
  336. -webkit-transform: scale(1);
  337. transform: scale(1);
  338. }
  339. }
  340. @-webkit-keyframes hideZeroAlert {
  341. 0% {
  342. -webkit-transform: scale(1);
  343. transform: scale(1);
  344. opacity: 1;
  345. }
  346. 100% {
  347. -webkit-transform: scale(0.5);
  348. transform: scale(0.5);
  349. opacity: 0;
  350. }
  351. }
  352. @keyframes hideZeroAlert {
  353. 0% {
  354. -webkit-transform: scale(1);
  355. transform: scale(1);
  356. opacity: 1;
  357. }
  358. 100% {
  359. -webkit-transform: scale(0.5);
  360. transform: scale(0.5);
  361. opacity: 0;
  362. }
  363. }
  364. .show-zero2 {
  365. -webkit-animation: showZeroAlert 0.3s;
  366. animation: showZeroAlert 0.3s;
  367. }
  368. .show-zero2.no-animation {
  369. -webkit-animation: none;
  370. animation: none;
  371. }
  372. .hide-zero2 {
  373. -webkit-animation: hideZeroAlert 0.15s;
  374. animation: hideZeroAlert 0.15s;
  375. }
  376. .hide-zero2.no-animation {
  377. -webkit-animation: none;
  378. animation: none;
  379. }
  380. .zeromodal-title1 {
  381. width: 100%;
  382. text-align: center;
  383. color: #575757;
  384. font-size: 20px;
  385. font-weight: bold;
  386. padding: 8px 0;
  387. }
  388. .zeromodal-title2 {
  389. width: 100%;
  390. text-align: center;
  391. color: #B7B7B7;
  392. font-size: 13px;
  393. padding: 8px 0;
  394. }
  395. .zeromodal-overflow-y {
  396. overflow-y: auto;
  397. }
  398. .zeromodal-progress {
  399. position: absolute;
  400. opacity: 0.8;
  401. width: 400px;
  402. height: 5px;
  403. overflow: visible;
  404. background: #f0f0f0;
  405. margin-bottom: 40px;
  406. border-radius: 4px;
  407. box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  408. }
  409. .zeromodal-progress .zeromodal-progress-bar {
  410. position: relative;
  411. animation: animate-positive 2s;
  412. }
  413. .zeromodal-progress-bar {
  414. float: left;
  415. width: 0;
  416. height: 100%;
  417. font-size: 12px;
  418. line-height: 20px;
  419. color: #fff;
  420. text-align: center;
  421. background-color: #337ab7;
  422. -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  423. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  424. -webkit-transition: width .6s ease;
  425. -o-transition: width .6s ease;
  426. transition: width .6s ease;
  427. }
  428. .zeromodal-progress .zeromodal-progress-icon {
  429. width: 30px;
  430. height: 30px;
  431. line-height: 25px;
  432. border-radius: 50%;
  433. font-size: 13px;
  434. position: absolute;
  435. top: -14px;
  436. right: 0;
  437. background: #fff;
  438. border-width: 3px;
  439. border-style: solid;
  440. text-align: center;
  441. }
  442. .zeromodal-fa {
  443. display: inline-block;
  444. font: normal normal normal 14px/1 FontAwesome;
  445. font-size: inherit;
  446. text-rendering: auto;
  447. -webkit-font-smoothing: antialiased;
  448. -moz-osx-font-smoothing: grayscale;
  449. }
  450. .zeromodal-progress-val {
  451. position: absolute;
  452. top: 10%;
  453. left: 10%;
  454. }
  455. .zeromodal-progress-val .line.tip {
  456. width: 13px;
  457. top: 13px;
  458. -webkit-transform: rotate(45deg);
  459. transform: rotate(45deg);
  460. }
  461. .zeromodal-progress-val .line {
  462. height: 5px;
  463. background-color: rgb(146, 194, 106);
  464. display: block;
  465. border-radius: 2px;
  466. position: absolute;
  467. z-index: 2;
  468. }
  469. .zeromodal-progress-val .line.long {
  470. width: 22px;
  471. right: -26px;
  472. top: 10px;
  473. -webkit-transform: rotate(-45deg);
  474. transform: rotate(-45deg);
  475. }
  476. @-webkit-keyframes rotate_pacman_half_up {
  477. 0% {
  478. -webkit-transform: rotate(270deg);
  479. transform: rotate(270deg);
  480. }
  481. 50% {
  482. -webkit-transform: rotate(360deg);
  483. transform: rotate(360deg);
  484. }
  485. 100% {
  486. -webkit-transform: rotate(270deg);
  487. transform: rotate(270deg);
  488. }
  489. }
  490. @keyframes rotate_pacman_half_up {
  491. 0% {
  492. -webkit-transform: rotate(270deg);
  493. transform: rotate(270deg);
  494. }
  495. 50% {
  496. -webkit-transform: rotate(360deg);
  497. transform: rotate(360deg);
  498. }
  499. 100% {
  500. -webkit-transform: rotate(270deg);
  501. transform: rotate(270deg);
  502. }
  503. }
  504. @-webkit-keyframes rotate_pacman_half_down {
  505. 0% {
  506. -webkit-transform: rotate(90deg);
  507. transform: rotate(90deg);
  508. }
  509. 50% {
  510. -webkit-transform: rotate(0deg);
  511. transform: rotate(0deg);
  512. }
  513. 100% {
  514. -webkit-transform: rotate(90deg);
  515. transform: rotate(90deg);
  516. }
  517. }
  518. @keyframes rotate_pacman_half_down {
  519. 0% {
  520. -webkit-transform: rotate(90deg);
  521. transform: rotate(90deg);
  522. }
  523. 50% {
  524. -webkit-transform: rotate(0deg);
  525. transform: rotate(0deg);
  526. }
  527. 100% {
  528. -webkit-transform: rotate(90deg);
  529. transform: rotate(90deg);
  530. }
  531. }
  532. @-webkit-keyframes pacman-balls {
  533. 75% {
  534. opacity: 0.7;
  535. }
  536. 100% {
  537. -webkit-transform: translate(-100px, -6.25px);
  538. transform: translate(-100px, -6.25px);
  539. }
  540. }
  541. @keyframes pacman-balls {
  542. 75% {
  543. opacity: 0.7;
  544. }
  545. 100% {
  546. -webkit-transform: translate(-100px, -6.25px);
  547. transform: translate(-100px, -6.25px);
  548. }
  549. }
  550. .pacman {
  551. position: absolute;
  552. }
  553. .pacman > div:nth-child(2) {
  554. -webkit-animation: pacman-balls 1s 0s infinite linear;
  555. animation: pacman-balls 1s 0s infinite linear;
  556. }
  557. .pacman > div:nth-child(3) {
  558. -webkit-animation: pacman-balls 1s 0.33s infinite linear;
  559. animation: pacman-balls 1s 0.33s infinite linear;
  560. }
  561. .pacman > div:nth-child(4) {
  562. -webkit-animation: pacman-balls 1s 0.66s infinite linear;
  563. animation: pacman-balls 1s 0.66s infinite linear;
  564. }
  565. .pacman > div:nth-child(5) {
  566. -webkit-animation: pacman-balls 1s 0.99s infinite linear;
  567. animation: pacman-balls 1s 0.99s infinite linear;
  568. }
  569. .pacman > div:first-of-type {
  570. width: 0px;
  571. height: 0px;
  572. border-right: 25px solid transparent;
  573. border-top: 25px solid #a5dc86;
  574. border-left: 25px solid #a5dc86;
  575. border-bottom: 25px solid #a5dc86;
  576. border-radius: 25px;
  577. -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  578. animation: rotate_pacman_half_up 0.5s 0s infinite;
  579. }
  580. .pacman > div:nth-child(2) {
  581. width: 0px;
  582. height: 0px;
  583. border-right: 25px solid transparent;
  584. border-top: 25px solid #a5dc86;
  585. border-left: 25px solid #a5dc86;
  586. border-bottom: 25px solid #a5dc86;
  587. border-radius: 25px;
  588. -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  589. animation: rotate_pacman_half_down 0.5s 0s infinite;
  590. margin-top: -50px;
  591. }
  592. .pacman > div:nth-child(3),
  593. .pacman > div:nth-child(4),
  594. .pacman > div:nth-child(5),
  595. .pacman > div:nth-child(6) {
  596. background-color: #a5dc86;
  597. width: 15px;
  598. height: 15px;
  599. border-radius: 100%;
  600. margin: 2px;
  601. width: 10px;
  602. height: 10px;
  603. position: absolute;
  604. -webkit-transform: translate(0, -6.25px);
  605. -ms-transform: translate(0, -6.25px);
  606. transform: translate(0, -6.25px);
  607. top: 25px;
  608. left: 100px;
  609. }
  610. @-webkit-keyframes line-scale-pulse-out {
  611. 0% {
  612. -webkit-transform: scaley(1);
  613. transform: scaley(1);
  614. }
  615. 50% {
  616. -webkit-transform: scaley(0.4);
  617. transform: scaley(0.4);
  618. }
  619. 100% {
  620. -webkit-transform: scaley(1);
  621. transform: scaley(1);
  622. }
  623. }
  624. @keyframes line-scale-pulse-out {
  625. 0% {
  626. -webkit-transform: scaley(1);
  627. transform: scaley(1);
  628. }
  629. 50% {
  630. -webkit-transform: scaley(0.4);
  631. transform: scaley(0.4);
  632. }
  633. 100% {
  634. -webkit-transform: scaley(1);
  635. transform: scaley(1);
  636. }
  637. }
  638. .line-scale-pulse-out {
  639. position: absolute;
  640. }
  641. .line-scale-pulse-out > div {
  642. background-color: #a5dc86;
  643. width: 4px;
  644. height: 35px;
  645. border-radius: 2px;
  646. margin: 2px;
  647. -webkit-animation-fill-mode: both;
  648. animation-fill-mode: both;
  649. display: inline-block;
  650. -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
  651. animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
  652. }
  653. .line-scale-pulse-out > div:nth-child(2),
  654. .line-scale-pulse-out > div:nth-child(4) {
  655. -webkit-animation-delay: 0.2s !important;
  656. animation-delay: 0.2s !important;
  657. }
  658. .line-scale-pulse-out > div:nth-child(1),
  659. .line-scale-pulse-out > div:nth-child(5) {
  660. -webkit-animation-delay: 0.4s !important;
  661. animation-delay: 0.4s !important;
  662. }
  663. @-webkit-keyframes line-scale-pulse-out-rapid {
  664. 0% {
  665. -webkit-transform: scaley(1);
  666. transform: scaley(1);
  667. }
  668. 80% {
  669. -webkit-transform: scaley(0.3);
  670. transform: scaley(0.3);
  671. }
  672. 90% {
  673. -webkit-transform: scaley(1);
  674. transform: scaley(1);
  675. }
  676. }
  677. @keyframes line-scale-pulse-out-rapid {
  678. 0% {
  679. -webkit-transform: scaley(1);
  680. transform: scaley(1);
  681. }
  682. 80% {
  683. -webkit-transform: scaley(0.3);
  684. transform: scaley(0.3);
  685. }
  686. 90% {
  687. -webkit-transform: scaley(1);
  688. transform: scaley(1);
  689. }
  690. }
  691. .line-scale-pulse-out-rapid > div {
  692. background-color: #a5dc86;
  693. width: 4px;
  694. height: 35px;
  695. border-radius: 2px;
  696. margin: 2px;
  697. -webkit-animation-fill-mode: both;
  698. animation-fill-mode: both;
  699. display: inline-block;
  700. -webkit-animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
  701. animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
  702. }
  703. .line-scale-pulse-out-rapid > div:nth-child(2),
  704. .line-scale-pulse-out-rapid > div:nth-child(4) {
  705. -webkit-animation-delay: 0.25s !important;
  706. animation-delay: 0.25s !important;
  707. }
  708. .line-scale-pulse-out-rapid > div:nth-child(1),
  709. .line-scale-pulse-out-rapid > div:nth-child(5) {
  710. -webkit-animation-delay: 0.5s !important;
  711. animation-delay: 0.5s !important;
  712. }
  713. @-webkit-keyframes line-spin-fade-loader {
  714. 50% {
  715. opacity: 0.3;
  716. }
  717. 100% {
  718. opacity: 1;
  719. }
  720. }
  721. @keyframes line-spin-fade-loader {
  722. 50% {
  723. opacity: 0.3;
  724. }
  725. 100% {
  726. opacity: 1;
  727. }
  728. }
  729. .line-spin-fade-loader {
  730. position: absolute;
  731. }
  732. .line-spin-fade-loader > div:nth-child(1) {
  733. top: 20px;
  734. left: 0;
  735. -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  736. animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  737. }
  738. .line-spin-fade-loader > div:nth-child(2) {
  739. top: 13.63636px;
  740. left: 13.63636px;
  741. -webkit-transform: rotate(-45deg);
  742. -ms-transform: rotate(-45deg);
  743. transform: rotate(-45deg);
  744. -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  745. animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  746. }
  747. .line-spin-fade-loader > div:nth-child(3) {
  748. top: 0;
  749. left: 20px;
  750. -webkit-transform: rotate(90deg);
  751. -ms-transform: rotate(90deg);
  752. transform: rotate(90deg);
  753. -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  754. animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  755. }
  756. .line-spin-fade-loader > div:nth-child(4) {
  757. top: -13.63636px;
  758. left: 13.63636px;
  759. -webkit-transform: rotate(45deg);
  760. -ms-transform: rotate(45deg);
  761. transform: rotate(45deg);
  762. -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  763. animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  764. }
  765. .line-spin-fade-loader > div:nth-child(5) {
  766. top: -20px;
  767. left: 0;
  768. -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  769. animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  770. }
  771. .line-spin-fade-loader > div:nth-child(6) {
  772. top: -13.63636px;
  773. left: -13.63636px;
  774. -webkit-transform: rotate(-45deg);
  775. -ms-transform: rotate(-45deg);
  776. transform: rotate(-45deg);
  777. -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  778. animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  779. }
  780. .line-spin-fade-loader > div:nth-child(7) {
  781. top: 0;
  782. left: -20px;
  783. -webkit-transform: rotate(90deg);
  784. -ms-transform: rotate(90deg);
  785. transform: rotate(90deg);
  786. -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  787. animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  788. }
  789. .line-spin-fade-loader > div:nth-child(8) {
  790. top: 13.63636px;
  791. left: -13.63636px;
  792. -webkit-transform: rotate(45deg);
  793. -ms-transform: rotate(45deg);
  794. transform: rotate(45deg);
  795. -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  796. animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  797. }
  798. .line-spin-fade-loader > div {
  799. background-color: #a5dc86;
  800. width: 4px;
  801. height: 35px;
  802. border-radius: 2px;
  803. margin: 2px;
  804. -webkit-animation-fill-mode: both;
  805. animation-fill-mode: both;
  806. position: absolute;
  807. width: 5px;
  808. height: 15px;
  809. }
  810. @-webkit-keyframes square-spin {
  811. 25% {
  812. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
  813. transform: perspective(100px) rotateX(180deg) rotateY(0);
  814. }
  815. 50% {
  816. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  817. transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  818. }
  819. 75% {
  820. -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
  821. transform: perspective(100px) rotateX(0) rotateY(180deg);
  822. }
  823. 100% {
  824. -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
  825. transform: perspective(100px) rotateX(0) rotateY(0);
  826. }
  827. }
  828. @keyframes square-spin {
  829. 25% {
  830. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
  831. transform: perspective(100px) rotateX(180deg) rotateY(0);
  832. }
  833. 50% {
  834. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  835. transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  836. }
  837. 75% {
  838. -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
  839. transform: perspective(100px) rotateX(0) rotateY(180deg);
  840. }
  841. 100% {
  842. -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
  843. transform: perspective(100px) rotateX(0) rotateY(0);
  844. }
  845. }
  846. .square-spin {
  847. position: absolute;
  848. }
  849. .square-spin > div {
  850. -webkit-animation-fill-mode: both;
  851. animation-fill-mode: both;
  852. width: 50px;
  853. height: 50px;
  854. background: #a5dc86;
  855. border: 1px solid #a5dc86;
  856. -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
  857. animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
  858. }
  859. .zeromodal-sweep-tee {
  860. border-width: 8px;
  861. border-color: #CECECE;
  862. border-left-width: 0;
  863. border-style: double;
  864. border-top-color: transparent;
  865. border-bottom-color: transparent;
  866. transform: rotateZ(220deg);
  867. position: absolute;
  868. right: 2px;
  869. bottom: 0;
  870. cursor: se-resize;
  871. -moz-user-select: none;
  872. -webkit-user-select: none;
  873. }