Scribd
Upload
12 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 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
We take content rights seriously. If you suspect this is your content, claim it here.
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