Scribd
Upload
9 views

Jquery

The document contains CSS code for styling modal popups and loading spinners on a webpage. It includes selectors and properties for blocking content, positioning modals and loading animations, and creating close buttons.

Uploaded by

rectangleangle
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views

Jquery

The document contains CSS code for styling modal popups and loading spinners on a webpage. It includes selectors and properties for blocking content, positioning modals and loading animations, and creating close buttons.

Uploaded by

rectangleangle
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

.

blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflo
w:auto;z-index:1;padding:20px;box-sizing:border-box;background-
color:#000;background-color:rgba(0,0,0,0.75);text-
align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-
align:middle;margin-right:-0.05em}.blocker.behind{background-
color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-
index:2;max-width:500px;box-sizing:border-
box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-
border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-
webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0
10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-
align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-
12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-
size:contain;background-repeat:no-repeat;background-position:center
center;background-
image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAX
NSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4B
U97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/ya
xxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNa
GfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3
YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lP
F5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdy
Z69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIH
VxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4s
NrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G
5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vD
Er25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJB
rWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMs
RYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQa
A4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKW
Ulg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-
spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%)
translateX(-50%);padding:12px 16px;border-radius:5px;background-
color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-
color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-
animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s
infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-
delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-
1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-
webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-
webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%
{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-
webkit-transform:scaleY(1.0)}}

You might also like