mcarman
/
Wappler_Access
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 Commits
1 Branch
10 MiB
 
 
 
Tree: 2c8c17bc88
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2c8c17bc88'
${ noResults }
Wappler_Access/public/dmxAppConnect/dmxPreloader/dmxPreloader.css

380 lines
12 KiB
Raw Blame History 

  1. .dmxCloak {

  2.     display: none;

  3. }

  4. 

  5. .dmxPreloader {

  6.     --color: #333;

  7.     --bgcolor: #fff;

  8.     position: fixed;

  9.     top: 0;

  10.     left: 0;

  11.     bottom: 0;

  12.     right: 0;

  13.     z-index: 1050;

  14.     background-color: #fff;

  15.     background-color: var(--bgcolor);

  16.     -webkit-transition: all 0.5s linear;

  17.     -moz-transition: all 0.5s linear;

  18.     -o-transition: all 0.5s linear;

  19.     -ms-transition: all 0.5s linear;

  20.     transition: all 0.5s linear;

  21. }

  22. 

  23. .dmxPreloader-spinner {

  24.     position: absolute;

  25.     top: 50%;

  26.     left: 50%;

  27.     margin-top: -20px;

  28.     margin-left: -20px;

  29.     width: 40px;

  30.     height: 40px;

  31. 

  32.     margin-top: calc(var(--size) / 2 * -1);

  33.     margin-left: calc(var(--size) / 2 * -1);

  34.     width: var(--size);

  35.     height: var(--size);

  36. }

  37. 

  38. /* rotatingPlane */

  39. 

  40. .dmxPreloader-rotatingPlane {

  41.     background-color: #333;

  42.     background-color: var(--color);

  43.     animation: rotatePlane 1.2s infinite ease-in-out;

  44. }

  45. 

  46. @keyframes rotatePlane {

  47.   0% { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }

  48.   50% { transform: perspective(200px) rotateX(-180.1deg) rotateY(0deg); }

  49.   100% { transform: perspective(200px) rotateX(-180deg) rotateY(-179.9deg); }

  50. }

  51. 

  52. /* doubleBounce */

  53. 

  54. .dmxPreloader-doubleBounce > div {

  55.     width: 100%;

  56.     height: 100%;

  57.     border-radius: 50%;

  58.     background-color: #333;

  59.     background-color: var(--color);

  60.     opacity: 0.6;

  61.     position: absolute;

  62.     top: 0;

  63.     left: 0;

  64.     animation: doubleBounce 2s infinite ease-in-out;

  65. }

  66. 

  67. .dmxPreloader-doubleBounce > div:nth-child(2) {

  68.     animation-delay: -1s;

  69. }

  70. 

  71. @keyframes doubleBounce {

  72.     0%, 100% { transform: scale(0); }

  73.     50% { transform: scale(1); }

  74. }

  75. 

  76. /* wave */

  77. 

  78. .dmxPreloader-wave > div {

  79.     background-color: #333;

  80.     background-color: var(--color);

  81.     height: 100%;

  82.     width: 6px;

  83.     width: calc((var(--size) / 5) - 6%);

  84.     margin: 0 3%;

  85.     display: inline-block;

  86.     animation: waveStretchDelay 1.2s infinite ease-in-out;

  87. }

  88. 

  89. .dmxPreloader-wave > div:nth-child(2) {

  90.     animation-delay: -.2s;

  91. }

  92. 

  93. .dmxPreloader-wave > div:nth-child(3) {

  94.     animation-delay: -.4s;

  95. }

  96. 

  97. .dmxPreloader-wave > div:nth-child(4) {

  98.     animation-delay: -.6s;

  99. }

  100. 

  101. .dmxPreloader-wave > div:nth-child(5) {

  102.     animation-delay: -.8s;

  103. }

  104. 

  105. @keyframes waveStretchDelay {

  106.     0%, 40%, 100% { transform: scaleY(0.4); }

  107.     20% { transform: scaleY(1); }

  108. }

  109. 

  110. /* wanderingCubes */

  111. 

  112. .dmxPreloader-wanderingCubes > div {

  113.     background-color: #333;

  114.     background-color: var(--color);

  115.     width: 15px;

  116.     height: 15px;

  117.     width: calc(var(--size) / 3);

  118.     height: calc(var(--size) / 3);

  119.     position: absolute;

  120.     top: 0;

  121.     left: 0;

  122.     animation: wanderingCube 1.8s infinite ease-in-out;

  123. }

  124. 

  125. .dmxPreloader-wanderingCubes > div:nth-child(2) {

  126.     animation-delay: -0.9s;

  127. }

  128. 

  129. @keyframes wanderingCube {

  130.     0% { transform: rotate(0deg); }

  131.     25% { transform: translateX(25px) rotate(-90deg) scale(0.5); transform: translateX(calc(var(--size) / 3 * 2)) rotate(-90deg) scale(0.5); }

  132.     50% { transform: translateX(25px) translateY(25px) rotate(-179deg); transform: translateX(calc(var(--size) / 3 * 2)) translateY(calc(var(--size) / 3 * 2)) rotate(-179deg); }

  133.     50.1% { transform: translateX(25px) translateY(25px) rotate(-180deg); transform: translateX(calc(var(--size) / 3 * 2)) translateY(calc(var(--size) / 3 * 2)) rotate(-180deg); }

  134.     75% { transform: translateX(0) translateY(25px) rotate(-270deg) scale(0.5); transform: translateX(0) translateY(calc(var(--size) / 3 * 2)) rotate(-270deg) scale(0.5); }

  135.     100% { transform: rotate(-360deg); }

  136. }

  137. 

  138. /* pulse */

  139. 

  140. .dmxPreloader-pulse {

  141.     background-color: #333;

  142.     background-color: var(--color);

  143.     border-radius: 50%;

  144.     animation: pulseScaleOut 1.0s infinite ease-in-out;

  145. }

  146. 

  147. @keyframes pulseScaleOut {

  148.     0% { transform: scale(0); }

  149.     100% { transform: scale(1); opacity: 0; }

  150. }

  151. 

  152. /* chasingDots */

  153. 

  154. .dmxPreloader-chasingDots {

  155.     animation: chasingDotsRotate 2s infinite linear;

  156. }

  157. 

  158. .dmxPreloader-chasingDots > div {

  159.     width: 60%;

  160.     height: 60%;

  161.     position: absolute;

  162.     top: 0;

  163.     left: 40%;

  164.     background-color: #333;

  165.     background-color: var(--color);

  166.     border-radius: 50%;

  167. 

  168.     animation: chasingDotsBounce 2s infinite ease-in-out;

  169. }

  170. 

  171. .dmxPreloader-chasingDots > div:nth-child(2) {

  172.     top: auto;

  173.     bottom: 0;

  174.     animation-delay: -1s;

  175. }

  176. 

  177. @keyframes chasingDotsRotate {

  178.     100% { transform: rotate(360deg); }

  179. }

  180. 

  181. @keyframes chasingDotsBounce {

  182.     0%, 100% { transform: scale(0); }

  183.     50% { transform: scale(1); }

  184. }

  185. 

  186. /* threeBounce */

  187. 

  188. .dmxPreloader-threeBounce > div {

  189.     background-color: #333;

  190.     background-color: var(--color);

  191.     width: 25%;

  192.     height: 25%;

  193.     margin: 37.5% 4%;

  194.     border-radius: 50%;

  195.     display: inline-block;

  196.     animation: threeBounce 1.4s infinite ease-in-out both;

  197. }

  198. 

  199. .dmxPreloader-threeBounce > div:nth-child(1) {

  200.     animation-delay: -0.32s;

  201. }

  202. 

  203. .dmxPreloader-threeBounce > div:nth-child(2) {

  204.     animation-delay: -0.16s;

  205. }

  206. 

  207. @keyframes threeBounce {

  208.     0%, 80%, 100% { transform: scale(0); }

  209.     40% { transform: scale(1); }

  210. }

  211. 

  212. /* circle */

  213. 

  214. .dmxPreloader-circle > div {

  215.     width: 100%;

  216.     height: 100%;

  217.     position: absolute;

  218.     left: 0;

  219.     top: 0;

  220. }

  221. 

  222. .dmxPreloader-circle > div:before {

  223.     content: '';

  224.     display: block;

  225.     margin: 0 auto;

  226.     width: 15%;

  227.     height: 15%;

  228.     background-color: #333;

  229.     background-color: var(--color);

  230.     border-radius: 50%;

  231.     animation: circleBounceDelay 1.2s infinite ease-in-out both;

  232. }

  233. 

  234. .dmxPreloader-circle > div:nth-child(2) { transform: rotate(30deg); }

  235. .dmxPreloader-circle > div:nth-child(2):before { animation-delay: -1.1s; }

  236. .dmxPreloader-circle > div:nth-child(3) { transform: rotate(60deg); }

  237. .dmxPreloader-circle > div:nth-child(3):before { animation-delay: -1.0s; }

  238. .dmxPreloader-circle > div:nth-child(4) { transform: rotate(90deg); }

  239. .dmxPreloader-circle > div:nth-child(4):before { animation-delay: -0.9s; }

  240. .dmxPreloader-circle > div:nth-child(5) { transform: rotate(120deg); }

  241. .dmxPreloader-circle > div:nth-child(5):before { animation-delay: -0.8s; }

  242. .dmxPreloader-circle > div:nth-child(6) { transform: rotate(150deg); }

  243. .dmxPreloader-circle > div:nth-child(6):before { animation-delay: -0.7s; }

  244. .dmxPreloader-circle > div:nth-child(7) { transform: rotate(180deg); }

  245. .dmxPreloader-circle > div:nth-child(7):before { animation-delay: -0.6s; }

  246. .dmxPreloader-circle > div:nth-child(8) { transform: rotate(210deg); }

  247. .dmxPreloader-circle > div:nth-child(8):before { animation-delay: -0.5s; }

  248. .dmxPreloader-circle > div:nth-child(9) { transform: rotate(240deg); }

  249. .dmxPreloader-circle > div:nth-child(9):before { animation-delay: -0.4s; }

  250. .dmxPreloader-circle > div:nth-child(10) { transform: rotate(270deg); }

  251. .dmxPreloader-circle > div:nth-child(10):before { animation-delay: -0.3s; }

  252. .dmxPreloader-circle > div:nth-child(11) { transform: rotate(300deg); }

  253. .dmxPreloader-circle > div:nth-child(11):before { animation-delay: -0.2s; }

  254. .dmxPreloader-circle > div:nth-child(12) { transform: rotate(330deg); }

  255. .dmxPreloader-circle > div:nth-child(12):before { animation-delay: -0.1s; }

  256. 

  257. @keyframes circleBounceDelay {

  258.     0%, 80%, 100% { transform: scale(0); }

  259.     40% { transform: scale(1); }

  260. }

  261. 

  262. /* cubeGrid */

  263. 

  264. .dmxPreloader-cubeGrid > div {

  265.     width: 33.33%;

  266.     height: 33.33%;

  267.     width: calc(var(--size) / 3);

  268.     height: calc(var(--size) / 3);

  269.     background-color: #333;

  270.     background-color: var(--color);

  271.     float: left;

  272.     animation: cubeGridScaleDelay 1.3s infinite ease-in-out;

  273. }

  274. 

  275. .dmxPreloader-cubeGrid > div:nth-child(1) { animation-delay: 0.2s; }

  276. .dmxPreloader-cubeGrid > div:nth-child(2) { animation-delay: 0.3s; }

  277. .dmxPreloader-cubeGrid > div:nth-child(3) { animation-delay: 0.4s; }

  278. .dmxPreloader-cubeGrid > div:nth-child(4) { animation-delay: 0.1s; }

  279. .dmxPreloader-cubeGrid > div:nth-child(5) { animation-delay: 0.2s; }

  280. .dmxPreloader-cubeGrid > div:nth-child(6) { animation-delay: 0.3s; }

  281. .dmxPreloader-cubeGrid > div:nth-child(7) { animation-delay: 0s; }

  282. .dmxPreloader-cubeGrid > div:nth-child(8) { animation-delay: 0.1s; }

  283. .dmxPreloader-cubeGrid > div:nth-child(9) { animation-delay: 0.2s; }

  284. 

  285. @keyframes cubeGridScaleDelay {

  286.     0%, 70%, 100% { transform: scale3d(1, 1, 1); }

  287.     35% { transform: scale3d(0, 0, 1); }

  288. }

  289. 

  290. /* fadingCircle */

  291. 

  292. .dmxPreloader-fadingCircle > div {

  293.     width: 100%;

  294.     height: 100%;

  295.     position: absolute;

  296.     left: 0;

  297.     top: 0;

  298. }

  299. 

  300. .dmxPreloader-fadingCircle > div:before {

  301.     content: '';

  302.     display: block;

  303.     margin: 0 auto;

  304.     width: 15%;

  305.     height: 15%;

  306.     background-color: #333;

  307.     background-color: var(--color);

  308.     border-radius: 50%;

  309.     animation: circleFadeDelay 1.2s infinite ease-in-out both;

  310. }

  311. 

  312. .dmxPreloader-fadingCircle > div:nth-child(2) { transform: rotate(30deg); }

  313. .dmxPreloader-fadingCircle > div:nth-child(2):before { animation-delay: -1.1s; }

  314. .dmxPreloader-fadingCircle > div:nth-child(3) { transform: rotate(60deg); }

  315. .dmxPreloader-fadingCircle > div:nth-child(3):before { animation-delay: -1.0s; }

  316. .dmxPreloader-fadingCircle > div:nth-child(4) { transform: rotate(90deg); }

  317. .dmxPreloader-fadingCircle > div:nth-child(4):before { animation-delay: -0.9s; }

  318. .dmxPreloader-fadingCircle > div:nth-child(5) { transform: rotate(120deg); }

  319. .dmxPreloader-fadingCircle > div:nth-child(5):before { animation-delay: -0.8s; }

  320. .dmxPreloader-fadingCircle > div:nth-child(6) { transform: rotate(150deg); }

  321. .dmxPreloader-fadingCircle > div:nth-child(6):before { animation-delay: -0.7s; }

  322. .dmxPreloader-fadingCircle > div:nth-child(7) { transform: rotate(180deg); }

  323. .dmxPreloader-fadingCircle > div:nth-child(7):before { animation-delay: -0.6s; }

  324. .dmxPreloader-fadingCircle > div:nth-child(8) { transform: rotate(210deg); }

  325. .dmxPreloader-fadingCircle > div:nth-child(8):before { animation-delay: -0.5s; }

  326. .dmxPreloader-fadingCircle > div:nth-child(9) { transform: rotate(240deg); }

  327. .dmxPreloader-fadingCircle > div:nth-child(9):before { animation-delay: -0.4s; }

  328. .dmxPreloader-fadingCircle > div:nth-child(10) { transform: rotate(270deg); }

  329. .dmxPreloader-fadingCircle > div:nth-child(10):before { animation-delay: -0.3s; }

  330. .dmxPreloader-fadingCircle > div:nth-child(11) { transform: rotate(300deg); }

  331. .dmxPreloader-fadingCircle > div:nth-child(11):before { animation-delay: -0.2s; }

  332. .dmxPreloader-fadingCircle > div:nth-child(12) { transform: rotate(330deg); }

  333. .dmxPreloader-fadingCircle > div:nth-child(12):before { animation-delay: -0.1s; }

  334. 

  335. @keyframes circleFadeDelay {

  336.     0%, 39%, 100% { opacity: 0; }

  337.     40% { opacity: 1; }

  338. }

  339. 

  340. /* foldingCube */

  341. 

  342. .dmxPreloader-foldingCube {

  343.     transform: rotateZ(45deg);

  344. }

  345. 

  346. .dmxPreloader-foldingCube > div {

  347.     float: left;

  348.     width: 50%;

  349.     height: 50%;

  350.     position: relative;

  351.     transform: scale(1.1);

  352. }

  353. 

  354. .dmxPreloader-foldingCube > div:before {

  355.     content: '';

  356.     position: absolute;

  357.     top: 0;

  358.     left: 0;

  359.     width: 100%;

  360.     height: 100%;

  361.     background-color: #333;

  362.     background-color: var(--color);

  363.     animation: foldCubeAngle 2.4s infinite linear both;

  364.     transform-origin: 100% 100%;

  365. }

  366. 

  367. .dmxPreloader-foldingCube > div:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }

  368. .dmxPreloader-foldingCube > div:nth-child(3) { transform: scale(1.1) rotateZ(270deg); }

  369. .dmxPreloader-foldingCube > div:nth-child(4) { transform: scale(1.1) rotateZ(180deg); }

  370. 

  371. .dmxPreloader-foldingCube > div:nth-child(2):before { animation-delay: 0.3s; }

  372. .dmxPreloader-foldingCube > div:nth-child(3):before { animation-delay: 0.9s; }

  373. .dmxPreloader-foldingCube > div:nth-child(4):before { animation-delay: 0.6s; }

  374. 

  375. @keyframes foldCubeAngle {

  376.     0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; }

  377.     25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; }

  378.     90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; }

  379. }