zeroModal.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969
  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-color: #a5dc86;
  240. }
  241. .zeromodal-icon.zeromodal-success::before {
  242. border-radius: 120px 0 0 120px;
  243. top: -7px;
  244. left: -33px;
  245. -webkit-transform: rotate(-45deg);
  246. transform: rotate(-45deg);
  247. -webkit-transform-origin: 60px 60px;
  248. transform-origin: 60px 60px;
  249. }
  250. .zeromodal-icon.zeromodal-success::after {
  251. border-radius: 0 120px 120px 0;
  252. top: -11px;
  253. left: 30px;
  254. -webkit-transform: rotate(-45deg);
  255. transform: rotate(-45deg);
  256. -webkit-transform-origin: 0 60px;
  257. transform-origin: 0 60px;
  258. }
  259. .zeromodal-icon.zeromodal-success .placeholder {
  260. width: 80px;
  261. height: 80px;
  262. border: 4px solid rgba(165, 220, 134, 0.2);
  263. border-radius: 50%;
  264. box-sizing: content-box;
  265. position: absolute;
  266. left: -4px;
  267. top: -4px;
  268. z-index: 2;
  269. }
  270. .zeromodal-icon.zeromodal-success .fix {
  271. width: 7px;
  272. height: 90px;
  273. background-color: #fff;
  274. position: absolute;
  275. left: 28px;
  276. top: 8px;
  277. z-index: 1;
  278. -webkit-transform: rotate(-45deg);
  279. transform: rotate(-45deg);
  280. }
  281. .zeromodal-icon.zeromodal-success .line {
  282. height: 5px;
  283. background-color: #a5dc86;
  284. display: block;
  285. border-radius: 2px;
  286. position: absolute;
  287. z-index: 2;
  288. }
  289. .zeromodal-icon.zeromodal-success .line.tip {
  290. width: 25px;
  291. left: 14px;
  292. top: 46px;
  293. -webkit-transform: rotate(45deg);
  294. transform: rotate(45deg);
  295. }
  296. .zeromodal-icon.zeromodal-success .line.long {
  297. width: 47px;
  298. right: 8px;
  299. top: 38px;
  300. -webkit-transform: rotate(-45deg);
  301. transform: rotate(-45deg);
  302. }
  303. @-webkit-keyframes showZeroAlert {
  304. 0% {
  305. -webkit-transform: scale(0.7);
  306. transform: scale(0.7);
  307. }
  308. 45% {
  309. -webkit-transform: scale(1.05);
  310. transform: scale(1.05);
  311. }
  312. 80% {
  313. -webkit-transform: scale(0.95);
  314. transform: scale(0.95);
  315. }
  316. 100% {
  317. -webkit-transform: scale(1);
  318. transform: scale(1);
  319. }
  320. }
  321. @keyframes showZeroAlert {
  322. 0% {
  323. -webkit-transform: scale(0.7);
  324. transform: scale(0.7);
  325. }
  326. 45% {
  327. -webkit-transform: scale(1.05);
  328. transform: scale(1.05);
  329. }
  330. 80% {
  331. -webkit-transform: scale(0.95);
  332. transform: scale(0.95);
  333. }
  334. 100% {
  335. -webkit-transform: scale(1);
  336. transform: scale(1);
  337. }
  338. }
  339. @-webkit-keyframes hideZeroAlert {
  340. 0% {
  341. -webkit-transform: scale(1);
  342. transform: scale(1);
  343. opacity: 1;
  344. }
  345. 100% {
  346. -webkit-transform: scale(0.5);
  347. transform: scale(0.5);
  348. opacity: 0;
  349. }
  350. }
  351. @keyframes hideZeroAlert {
  352. 0% {
  353. -webkit-transform: scale(1);
  354. transform: scale(1);
  355. opacity: 1;
  356. }
  357. 100% {
  358. -webkit-transform: scale(0.5);
  359. transform: scale(0.5);
  360. opacity: 0;
  361. }
  362. }
  363. .show-zero2 {
  364. -webkit-animation: showZeroAlert 0.3s;
  365. animation: showZeroAlert 0.3s;
  366. }
  367. .show-zero2.no-animation {
  368. -webkit-animation: none;
  369. animation: none;
  370. }
  371. .hide-zero2 {
  372. -webkit-animation: hideZeroAlert 0.15s;
  373. animation: hideZeroAlert 0.15s;
  374. }
  375. .hide-zero2.no-animation {
  376. -webkit-animation: none;
  377. animation: none;
  378. }
  379. .zeromodal-title1 {
  380. width: 100%;
  381. text-align: center;
  382. color: #575757;
  383. font-size: 20px;
  384. font-weight: bold;
  385. padding: 8px 0;
  386. }
  387. .zeromodal-title2 {
  388. width: 100%;
  389. text-align: center;
  390. color: #B7B7B7;
  391. font-size: 13px;
  392. padding: 8px 0;
  393. }
  394. .zeromodal-overflow-y {
  395. overflow-y: auto;
  396. }
  397. .zeromodal-progress {
  398. position: absolute;
  399. opacity: 0.8;
  400. width: 400px;
  401. height: 5px;
  402. overflow: visible;
  403. background: #f0f0f0;
  404. margin-bottom: 40px;
  405. border-radius: 4px;
  406. box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  407. }
  408. .zeromodal-progress .zeromodal-progress-bar {
  409. position: relative;
  410. animation: animate-positive 2s;
  411. }
  412. .zeromodal-progress-bar {
  413. float: left;
  414. width: 0;
  415. height: 100%;
  416. font-size: 12px;
  417. line-height: 20px;
  418. color: #fff;
  419. text-align: center;
  420. background-color: #337ab7;
  421. -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  422. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  423. -webkit-transition: width .6s ease;
  424. -o-transition: width .6s ease;
  425. transition: width .6s ease;
  426. }
  427. .zeromodal-progress .zeromodal-progress-icon {
  428. width: 30px;
  429. height: 30px;
  430. line-height: 25px;
  431. border-radius: 50%;
  432. font-size: 13px;
  433. position: absolute;
  434. top: -14px;
  435. right: 0;
  436. background: #fff;
  437. border-width: 3px;
  438. border-style: solid;
  439. text-align: center;
  440. }
  441. .zeromodal-fa {
  442. display: inline-block;
  443. font: normal normal normal 14px/1 FontAwesome;
  444. font-size: inherit;
  445. text-rendering: auto;
  446. -webkit-font-smoothing: antialiased;
  447. -moz-osx-font-smoothing: grayscale;
  448. }
  449. .zeromodal-progress-val {
  450. position: absolute;
  451. top: 10%;
  452. left: 10%;
  453. }
  454. .zeromodal-progress-val .line.tip {
  455. width: 13px;
  456. top: 13px;
  457. -webkit-transform: rotate(45deg);
  458. transform: rotate(45deg);
  459. }
  460. .zeromodal-progress-val .line {
  461. height: 5px;
  462. background-color: rgb(146, 194, 106);
  463. display: block;
  464. border-radius: 2px;
  465. position: absolute;
  466. z-index: 2;
  467. }
  468. .zeromodal-progress-val .line.long {
  469. width: 22px;
  470. right: -26px;
  471. top: 10px;
  472. -webkit-transform: rotate(-45deg);
  473. transform: rotate(-45deg);
  474. }
  475. @-webkit-keyframes rotate_pacman_half_up {
  476. 0% {
  477. -webkit-transform: rotate(270deg);
  478. transform: rotate(270deg);
  479. }
  480. 50% {
  481. -webkit-transform: rotate(360deg);
  482. transform: rotate(360deg);
  483. }
  484. 100% {
  485. -webkit-transform: rotate(270deg);
  486. transform: rotate(270deg);
  487. }
  488. }
  489. @keyframes rotate_pacman_half_up {
  490. 0% {
  491. -webkit-transform: rotate(270deg);
  492. transform: rotate(270deg);
  493. }
  494. 50% {
  495. -webkit-transform: rotate(360deg);
  496. transform: rotate(360deg);
  497. }
  498. 100% {
  499. -webkit-transform: rotate(270deg);
  500. transform: rotate(270deg);
  501. }
  502. }
  503. @-webkit-keyframes rotate_pacman_half_down {
  504. 0% {
  505. -webkit-transform: rotate(90deg);
  506. transform: rotate(90deg);
  507. }
  508. 50% {
  509. -webkit-transform: rotate(0deg);
  510. transform: rotate(0deg);
  511. }
  512. 100% {
  513. -webkit-transform: rotate(90deg);
  514. transform: rotate(90deg);
  515. }
  516. }
  517. @keyframes rotate_pacman_half_down {
  518. 0% {
  519. -webkit-transform: rotate(90deg);
  520. transform: rotate(90deg);
  521. }
  522. 50% {
  523. -webkit-transform: rotate(0deg);
  524. transform: rotate(0deg);
  525. }
  526. 100% {
  527. -webkit-transform: rotate(90deg);
  528. transform: rotate(90deg);
  529. }
  530. }
  531. @-webkit-keyframes pacman-balls {
  532. 75% {
  533. opacity: 0.7;
  534. }
  535. 100% {
  536. -webkit-transform: translate(-100px, -6.25px);
  537. transform: translate(-100px, -6.25px);
  538. }
  539. }
  540. @keyframes pacman-balls {
  541. 75% {
  542. opacity: 0.7;
  543. }
  544. 100% {
  545. -webkit-transform: translate(-100px, -6.25px);
  546. transform: translate(-100px, -6.25px);
  547. }
  548. }
  549. .pacman {
  550. position: absolute;
  551. }
  552. .pacman > div:nth-child(2) {
  553. -webkit-animation: pacman-balls 1s 0s infinite linear;
  554. animation: pacman-balls 1s 0s infinite linear;
  555. }
  556. .pacman > div:nth-child(3) {
  557. -webkit-animation: pacman-balls 1s 0.33s infinite linear;
  558. animation: pacman-balls 1s 0.33s infinite linear;
  559. }
  560. .pacman > div:nth-child(4) {
  561. -webkit-animation: pacman-balls 1s 0.66s infinite linear;
  562. animation: pacman-balls 1s 0.66s infinite linear;
  563. }
  564. .pacman > div:nth-child(5) {
  565. -webkit-animation: pacman-balls 1s 0.99s infinite linear;
  566. animation: pacman-balls 1s 0.99s infinite linear;
  567. }
  568. .pacman > div:first-of-type {
  569. width: 0px;
  570. height: 0px;
  571. border-right: 25px solid transparent;
  572. border-top: 25px solid #a5dc86;
  573. border-left: 25px solid #a5dc86;
  574. border-bottom: 25px solid #a5dc86;
  575. border-radius: 25px;
  576. -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  577. animation: rotate_pacman_half_up 0.5s 0s infinite;
  578. }
  579. .pacman > div:nth-child(2) {
  580. width: 0px;
  581. height: 0px;
  582. border-right: 25px solid transparent;
  583. border-top: 25px solid #a5dc86;
  584. border-left: 25px solid #a5dc86;
  585. border-bottom: 25px solid #a5dc86;
  586. border-radius: 25px;
  587. -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  588. animation: rotate_pacman_half_down 0.5s 0s infinite;
  589. margin-top: -50px;
  590. }
  591. .pacman > div:nth-child(3),
  592. .pacman > div:nth-child(4),
  593. .pacman > div:nth-child(5),
  594. .pacman > div:nth-child(6) {
  595. background-color: #a5dc86;
  596. width: 15px;
  597. height: 15px;
  598. border-radius: 100%;
  599. margin: 2px;
  600. width: 10px;
  601. height: 10px;
  602. position: absolute;
  603. -webkit-transform: translate(0, -6.25px);
  604. -ms-transform: translate(0, -6.25px);
  605. transform: translate(0, -6.25px);
  606. top: 25px;
  607. left: 100px;
  608. }
  609. @-webkit-keyframes line-scale-pulse-out {
  610. 0% {
  611. -webkit-transform: scaley(1);
  612. transform: scaley(1);
  613. }
  614. 50% {
  615. -webkit-transform: scaley(0.4);
  616. transform: scaley(0.4);
  617. }
  618. 100% {
  619. -webkit-transform: scaley(1);
  620. transform: scaley(1);
  621. }
  622. }
  623. @keyframes line-scale-pulse-out {
  624. 0% {
  625. -webkit-transform: scaley(1);
  626. transform: scaley(1);
  627. }
  628. 50% {
  629. -webkit-transform: scaley(0.4);
  630. transform: scaley(0.4);
  631. }
  632. 100% {
  633. -webkit-transform: scaley(1);
  634. transform: scaley(1);
  635. }
  636. }
  637. .line-scale-pulse-out {
  638. position: absolute;
  639. }
  640. .line-scale-pulse-out > div {
  641. background-color: #a5dc86;
  642. width: 4px;
  643. height: 35px;
  644. border-radius: 2px;
  645. margin: 2px;
  646. -webkit-animation-fill-mode: both;
  647. animation-fill-mode: both;
  648. display: inline-block;
  649. -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
  650. animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
  651. }
  652. .line-scale-pulse-out > div:nth-child(2),
  653. .line-scale-pulse-out > div:nth-child(4) {
  654. -webkit-animation-delay: 0.2s !important;
  655. animation-delay: 0.2s !important;
  656. }
  657. .line-scale-pulse-out > div:nth-child(1),
  658. .line-scale-pulse-out > div:nth-child(5) {
  659. -webkit-animation-delay: 0.4s !important;
  660. animation-delay: 0.4s !important;
  661. }
  662. @-webkit-keyframes line-scale-pulse-out-rapid {
  663. 0% {
  664. -webkit-transform: scaley(1);
  665. transform: scaley(1);
  666. }
  667. 80% {
  668. -webkit-transform: scaley(0.3);
  669. transform: scaley(0.3);
  670. }
  671. 90% {
  672. -webkit-transform: scaley(1);
  673. transform: scaley(1);
  674. }
  675. }
  676. @keyframes line-scale-pulse-out-rapid {
  677. 0% {
  678. -webkit-transform: scaley(1);
  679. transform: scaley(1);
  680. }
  681. 80% {
  682. -webkit-transform: scaley(0.3);
  683. transform: scaley(0.3);
  684. }
  685. 90% {
  686. -webkit-transform: scaley(1);
  687. transform: scaley(1);
  688. }
  689. }
  690. .line-scale-pulse-out-rapid > div {
  691. background-color: #a5dc86;
  692. width: 4px;
  693. height: 35px;
  694. border-radius: 2px;
  695. margin: 2px;
  696. -webkit-animation-fill-mode: both;
  697. animation-fill-mode: both;
  698. display: inline-block;
  699. -webkit-animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
  700. animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
  701. }
  702. .line-scale-pulse-out-rapid > div:nth-child(2),
  703. .line-scale-pulse-out-rapid > div:nth-child(4) {
  704. -webkit-animation-delay: 0.25s !important;
  705. animation-delay: 0.25s !important;
  706. }
  707. .line-scale-pulse-out-rapid > div:nth-child(1),
  708. .line-scale-pulse-out-rapid > div:nth-child(5) {
  709. -webkit-animation-delay: 0.5s !important;
  710. animation-delay: 0.5s !important;
  711. }
  712. @-webkit-keyframes line-spin-fade-loader {
  713. 50% {
  714. opacity: 0.3;
  715. }
  716. 100% {
  717. opacity: 1;
  718. }
  719. }
  720. @keyframes line-spin-fade-loader {
  721. 50% {
  722. opacity: 0.3;
  723. }
  724. 100% {
  725. opacity: 1;
  726. }
  727. }
  728. .line-spin-fade-loader {
  729. position: absolute;
  730. }
  731. .line-spin-fade-loader > div:nth-child(1) {
  732. top: 20px;
  733. left: 0;
  734. -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  735. animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  736. }
  737. .line-spin-fade-loader > div:nth-child(2) {
  738. top: 13.63636px;
  739. left: 13.63636px;
  740. -webkit-transform: rotate(-45deg);
  741. -ms-transform: rotate(-45deg);
  742. transform: rotate(-45deg);
  743. -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  744. animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  745. }
  746. .line-spin-fade-loader > div:nth-child(3) {
  747. top: 0;
  748. left: 20px;
  749. -webkit-transform: rotate(90deg);
  750. -ms-transform: rotate(90deg);
  751. transform: rotate(90deg);
  752. -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  753. animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  754. }
  755. .line-spin-fade-loader > div:nth-child(4) {
  756. top: -13.63636px;
  757. left: 13.63636px;
  758. -webkit-transform: rotate(45deg);
  759. -ms-transform: rotate(45deg);
  760. transform: rotate(45deg);
  761. -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  762. animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  763. }
  764. .line-spin-fade-loader > div:nth-child(5) {
  765. top: -20px;
  766. left: 0;
  767. -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  768. animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  769. }
  770. .line-spin-fade-loader > div:nth-child(6) {
  771. top: -13.63636px;
  772. left: -13.63636px;
  773. -webkit-transform: rotate(-45deg);
  774. -ms-transform: rotate(-45deg);
  775. transform: rotate(-45deg);
  776. -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  777. animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  778. }
  779. .line-spin-fade-loader > div:nth-child(7) {
  780. top: 0;
  781. left: -20px;
  782. -webkit-transform: rotate(90deg);
  783. -ms-transform: rotate(90deg);
  784. transform: rotate(90deg);
  785. -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  786. animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  787. }
  788. .line-spin-fade-loader > div:nth-child(8) {
  789. top: 13.63636px;
  790. left: -13.63636px;
  791. -webkit-transform: rotate(45deg);
  792. -ms-transform: rotate(45deg);
  793. transform: rotate(45deg);
  794. -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  795. animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  796. }
  797. .line-spin-fade-loader > div {
  798. background-color: #a5dc86;
  799. width: 4px;
  800. height: 35px;
  801. border-radius: 2px;
  802. margin: 2px;
  803. -webkit-animation-fill-mode: both;
  804. animation-fill-mode: both;
  805. position: absolute;
  806. width: 5px;
  807. height: 15px;
  808. }
  809. @-webkit-keyframes square-spin {
  810. 25% {
  811. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
  812. transform: perspective(100px) rotateX(180deg) rotateY(0);
  813. }
  814. 50% {
  815. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  816. transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  817. }
  818. 75% {
  819. -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
  820. transform: perspective(100px) rotateX(0) rotateY(180deg);
  821. }
  822. 100% {
  823. -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
  824. transform: perspective(100px) rotateX(0) rotateY(0);
  825. }
  826. }
  827. @keyframes square-spin {
  828. 25% {
  829. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
  830. transform: perspective(100px) rotateX(180deg) rotateY(0);
  831. }
  832. 50% {
  833. -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  834. transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  835. }
  836. 75% {
  837. -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
  838. transform: perspective(100px) rotateX(0) rotateY(180deg);
  839. }
  840. 100% {
  841. -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
  842. transform: perspective(100px) rotateX(0) rotateY(0);
  843. }
  844. }
  845. .square-spin {
  846. position: absolute;
  847. }
  848. .square-spin > div {
  849. -webkit-animation-fill-mode: both;
  850. animation-fill-mode: both;
  851. width: 50px;
  852. height: 50px;
  853. background: #a5dc86;
  854. border: 1px solid #a5dc86;
  855. -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
  856. animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
  857. }
  858. .zeromodal-sweep-tee {
  859. border-width: 8px;
  860. border-color: #CECECE;
  861. border-left-width: 0;
  862. border-style: double;
  863. border-top-color: transparent;
  864. border-bottom-color: transparent;
  865. transform: rotateZ(220deg);
  866. position: absolute;
  867. right: 2px;
  868. bottom: 0;
  869. cursor: se-resize;
  870. -moz-user-select: none;
  871. -webkit-user-select: none;
  872. }