Created
October 4, 2019 21:31
-
-
Save lomotech/251db23ad7ad71ab7736e4c3f263719e to your computer and use it in GitHub Desktop.
uiblock processing box
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// CSS | |
/*block ui loading*/ | |
.blockui > .boxes { | |
--size: 32px; | |
--duration: 800ms; | |
height: calc(var(--size) * 2); | |
width: calc(var(--size) * 3); | |
position: relative; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transform-origin: 50% 50%; | |
transform-origin: 50% 50%; | |
margin-top: calc(var(--size) * 1.5 * -1); | |
-webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); | |
transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); | |
} | |
.blockui > .boxes .box { | |
width: var(--size); | |
height: var(--size); | |
top: 0; | |
left: 0; | |
position: absolute; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.blockui > .boxes .box:nth-child(1) { | |
-webkit-transform: translate(100%, 0); | |
transform: translate(100%, 0); | |
-webkit-animation: box1 var(--duration) linear infinite; | |
animation: box1 var(--duration) linear infinite; | |
} | |
.blockui > .boxes .box:nth-child(2) { | |
-webkit-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
-webkit-animation: box2 var(--duration) linear infinite; | |
animation: box2 var(--duration) linear infinite; | |
} | |
.blockui > .boxes .box:nth-child(3) { | |
-webkit-transform: translate(100%, 100%); | |
transform: translate(100%, 100%); | |
-webkit-animation: box3 var(--duration) linear infinite; | |
animation: box3 var(--duration) linear infinite; | |
} | |
.blockui > .boxes .box:nth-child(4) { | |
-webkit-transform: translate(200%, 0); | |
transform: translate(200%, 0); | |
-webkit-animation: box4 var(--duration) linear infinite; | |
animation: box4 var(--duration) linear infinite; | |
} | |
.blockui > .boxes .box > div { | |
--background: #5C8DF6; | |
--top: auto; | |
--right: auto; | |
--bottom: auto; | |
--left: auto; | |
--translateZ: calc(var(--size) / 2); | |
--rotateY: 0deg; | |
--rotateX: 0deg; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background: var(--background); | |
top: var(--top); | |
right: var(--right); | |
bottom: var(--bottom); | |
left: var(--left); | |
-webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); | |
transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); | |
} | |
.blockui > .boxes .box > div:nth-child(1) { | |
--top: 0; | |
--left: 0; | |
} | |
.blockui > .boxes .box > div:nth-child(2) { | |
--background: #145af2; | |
--right: 0; | |
--rotateY: 90deg; | |
} | |
.blockui > .boxes .box > div:nth-child(3) { | |
--background: #447cf5; | |
--rotateX: -90deg; | |
} | |
.blockui > .boxes .box > div:nth-child(4) { | |
--background: #DBE3F4; | |
--top: 0; | |
--left: 0; | |
--translateZ: calc(var(--size) * 3 * -1); | |
} | |
@-webkit-keyframes box1 { | |
0%, | |
50% { | |
-webkit-transform: translate(100%, 0); | |
transform: translate(100%, 0); | |
} | |
100% { | |
-webkit-transform: translate(200%, 0); | |
transform: translate(200%, 0); | |
} | |
} | |
@keyframes box1 { | |
0%, | |
50% { | |
-webkit-transform: translate(100%, 0); | |
transform: translate(100%, 0); | |
} | |
100% { | |
-webkit-transform: translate(200%, 0); | |
transform: translate(200%, 0); | |
} | |
} | |
@-webkit-keyframes box2 { | |
0% { | |
-webkit-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
} | |
50% { | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
100% { | |
-webkit-transform: translate(100%, 0); | |
transform: translate(100%, 0); | |
} | |
} | |
@keyframes box2 { | |
0% { | |
-webkit-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
} | |
50% { | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
100% { | |
-webkit-transform: translate(100%, 0); | |
transform: translate(100%, 0); | |
} | |
} | |
@-webkit-keyframes box3 { | |
0%, | |
50% { | |
-webkit-transform: translate(100%, 100%); | |
transform: translate(100%, 100%); | |
} | |
100% { | |
-webkit-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
} | |
} | |
@keyframes box3 { | |
0%, | |
50% { | |
-webkit-transform: translate(100%, 100%); | |
transform: translate(100%, 100%); | |
} | |
100% { | |
-webkit-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
} | |
} | |
@-webkit-keyframes box4 { | |
0% { | |
-webkit-transform: translate(200%, 0); | |
transform: translate(200%, 0); | |
} | |
50% { | |
-webkit-transform: translate(200%, 100%); | |
transform: translate(200%, 100%); | |
} | |
100% { | |
-webkit-transform: translate(100%, 100%); | |
transform: translate(100%, 100%); | |
} | |
} | |
@keyframes box4 { | |
0% { | |
-webkit-transform: translate(200%, 0); | |
transform: translate(200%, 0); | |
} | |
50% { | |
-webkit-transform: translate(200%, 100%); | |
transform: translate(200%, 100%); | |
} | |
100% { | |
-webkit-transform: translate(100%, 100%); | |
transform: translate(100%, 100%); | |
} | |
} | |
// js | |
var myBlockui = function () { | |
console.log('bui open') | |
$.blockUI({ message: '<div class="blockui">\n' + | |
' <div class="boxes">\n' + | |
' <div class="box">\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' </div>\n' + | |
' <div class="box">\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' </div>\n' + | |
' <div class="box">\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' </div>\n' + | |
' <div class="box">\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' <div></div>\n' + | |
' </div>\n' + | |
'</div>\n' + | |
'</div><h1>Processing...</h1><p>Please do not refresh or close your browser.</p>', | |
baseZ: 11000 | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment