.bodyloading {
|
background: ;
|
background-size: cover;
|
margin: 0;
|
padding-top: 5em;
|
padding-bottom: 5em;
|
}
|
|
.container {
|
display: flex;
|
flex-wrap: wrap;
|
display: flex;
|
|
justify-content: space-around;
|
align-items: center;
|
align-content: flex-start;
|
justify-content: space-around;
|
margin: 0 auto;
|
|
}
|
|
.canvas {
|
align-items: center;
|
opacity:1;
|
border-radius: 10%;
|
box-shadow: 0 5px 20px rgba(0,0,0,0);
|
display: flex;
|
|
justify-content: center;
|
margin-top: 30%;
|
|
}
|
|
/* Spinner 1 starts here */
|
.spinner1 {
|
align-items: center;
|
border: .3em solid transparent;
|
border-top: .3em solid #4DB6AC;
|
border-right: .3em solid #4DB6AC;
|
border-radius: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.spinnerMax {
|
animation: spinnerOne 3s linear infinite;
|
height: 3em;
|
width: 3em;
|
}
|
|
.spinnerMid {
|
animation: spinnerOne 5s linear infinite;
|
height: 2.4em;
|
width: 2.4em;
|
}
|
|
.spinnerMin {
|
animation: spinnerOne 5s linear infinite;
|
height: 1.8em;
|
width: 1.8em;
|
}
|
|
@keyframes spinnerOne {
|
0% {
|
transform: rotate(0deg)
|
}
|
100% {
|
transform: rotate(360deg)
|
}
|
}
|
/* Spinner 1 ends here */
|
|
/* Spinner 2 starts here */
|
.canvas2 {
|
position: relative;
|
}
|
|
.spinner2 {
|
animation: spinnerTwo 1s linear infinite;
|
background: #4DB6AC;
|
border-radius: 100px;
|
height: 3em;
|
transform-origin: top;
|
position: absolute;
|
top: 50%;
|
width: .22em;
|
}
|
|
.hourHand {
|
animation: spinnerTwo 7s linear infinite;
|
background: #4DB6AC;
|
border-radius: 100px;
|
height: 2em;
|
transform-origin: top;
|
position: absolute;
|
top: 50%;
|
width: .2em;
|
}
|
|
.dot {
|
background: #4DB6AC;
|
border-radius: 100%;
|
height: .5em;
|
width: .5em;
|
}
|
|
@keyframes spinnerTwo {
|
0% {
|
transform: rotate(0deg)
|
}
|
100% {
|
transform: rotate(360deg)
|
}
|
}
|
/* Spinner 2 ends here */
|
|
/* Spinner 3 starts here */
|
.spinner3 {
|
animation: spinnerThree 1s linear infinite;
|
background: #4DB6AC;
|
border-radius: 100%;
|
width: 3em;
|
height: 3em;
|
}
|
|
@keyframes spinnerThree {
|
0%, 35% {
|
background: #4DB6AC;
|
transform: scale(1);
|
}
|
20%, 50% {
|
background: #80CBC4;
|
transform: scale(1.3);
|
}
|
}
|
/* Spinner 3 ends here */
|
|
/* Spinner 4 starts here */
|
.spinner4 {
|
animation: spinnerFour 1s linear infinite;
|
border: solid 7px transparent;
|
border-top: solid 7px #4DB6AC;
|
border-radius: 100%;
|
width: 3em;
|
height: 3em;
|
}
|
|
@keyframes spinnerFour {
|
0% {
|
transform: rotate(0deg);
|
}
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
/* Spinner 4 ends here */
|
|
/* Spinner 5 starts here */
|
.spinner5 {
|
animation: spinnerFive 1s linear infinite;
|
border: solid 1.5em #4DB6AC;
|
border-right: solid 1.5em transparent;
|
border-left: solid 1.5em transparent;
|
border-radius: 100%;
|
width: 0;
|
height: 0;
|
}
|
|
@keyframes spinnerFive {
|
0% {
|
transform: rotate(0deg);
|
}
|
50% {
|
transform: rotate(60deg)
|
}
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
/* Spinner 5 ends here */
|
|
/* Spinner 6 starts here */
|
.spinner6 {
|
background: #4DB6AC;
|
border-radius: 50%;
|
height: 1em;
|
margin: .1em;
|
width: 1em;
|
}
|
|
.p1 {
|
animation: fall 1s linear .3s infinite;
|
}
|
|
.p2 {
|
animation: fall 1s linear .2s infinite;
|
}
|
|
.p3 {
|
animation: fall 1s linear .1s infinite;
|
}
|
|
.p4 {
|
animation: fall 1s linear infinite;
|
}
|
|
@keyframes fall {
|
0% {
|
transform: translateY(-15px);
|
}
|
25%, 75% {
|
transform: translateY(0);
|
}
|
100% {
|
transform: translateY(-15px);
|
}
|
}
|
/* Spinner 6 ends here */
|
|
@media (max-width: 600px) {
|
.container {
|
align-items: center;
|
flex-direction: column;
|
}
|
.canvas {
|
margin: 1em;
|
}
|
}
|
|
.shade {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
opacity: 0;
|
-moz-opacity: 0;
|
filter: alpha(opacity=0);
|
}
|
|
/* Title */
|
.popmsg-title {
|
width: 100%;
|
float: left;
|
background: #4e6d8d;
|
color: #fff;
|
font-size: 14px;
|
line-height: 30px;
|
text-indent: 20px;
|
}
|
|
.popmsg-title i {
|
font-size: 16px;
|
text-indent: 0;
|
margin-right: 10px;
|
}
|
|
/* Content */
|
.popmsg-content {
|
width: 100%;
|
float: left;
|
background: #fff;
|
padding: 10px;
|
line-height: 25px;
|
text-align: center;
|
}
|
|
.popmsg-close {
|
width: 100%;
|
float: left;
|
background: #fff;
|
padding: 5px 0;
|
text-align: center;
|
}
|
|
/* Primary */
|
.popmsg.popmsg-primary {
|
border: 5px #1abc9c solid;
|
}
|
|
.popmsg.popmsg-primary .popmsg-title {
|
background: #2fe2bf;
|
}
|
|
/* Information */
|
.popmsg.popmsg-info {
|
border: 5px #3498db solid;
|
}
|
|
.popmsg.popmsg-info .popmsg-title {
|
background: #5dade2;
|
}
|
|
/* Danger */
|
.popmsg.popmsg-danger {
|
border: 5px #e74c3c solid;
|
}
|
|
.popmsg.popmsg-danger .popmsg-title {
|
background: #ec7063;
|
}
|
|
/* Success */
|
.popmsg.popmsg-success {
|
border: 5px #2ecc72 solid;
|
}
|
|
.popmsg.popmsg-success .popmsg-title {
|
background: #55d98d;
|
}
|
|
/* Warning */
|
.popmsg.popmsg-warning {
|
border: 5px #f2c81d solid;
|
}
|
|
.popmsg.popmsg-warning .popmsg-title {
|
background: #f4d03f;
|
}
|
