112 lines
2.1 KiB
CSS
112 lines
2.1 KiB
CSS
/**
|
|
* ==============================================
|
|
* Dot Pulse
|
|
* ==============================================
|
|
*/
|
|
.dot-pulse {
|
|
position: relative;
|
|
left: -9999px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
color: #fff;
|
|
box-shadow: 9999px 0 0 -5px;
|
|
-webkit-animation: dot-pulse 1.5s infinite linear;
|
|
animation: dot-pulse 1.5s infinite linear;
|
|
-webkit-animation-delay: 0.25s;
|
|
animation-delay: 0.25s;
|
|
}
|
|
.dot-pulse::before, .dot-pulse::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
color: #fff;
|
|
}
|
|
.dot-pulse::before {
|
|
box-shadow: 9984px 0 0 -5px;
|
|
-webkit-animation: dot-pulse-before 1.5s infinite linear;
|
|
animation: dot-pulse-before 1.5s infinite linear;
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
.dot-pulse::after {
|
|
box-shadow: 10014px 0 0 -5px;
|
|
-webkit-animation: dot-pulse-after 1.5s infinite linear;
|
|
animation: dot-pulse-after 1.5s infinite linear;
|
|
-webkit-animation-delay: 0.5s;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@-webkit-keyframes dot-pulse-before {
|
|
0% {
|
|
box-shadow: 9984px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 9984px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 9984px 0 0 -5px;
|
|
}
|
|
}
|
|
|
|
@keyframes dot-pulse-before {
|
|
0% {
|
|
box-shadow: 9984px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 9984px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 9984px 0 0 -5px;
|
|
}
|
|
}
|
|
@-webkit-keyframes dot-pulse {
|
|
0% {
|
|
box-shadow: 9999px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 9999px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 9999px 0 0 -5px;
|
|
}
|
|
}
|
|
@keyframes dot-pulse {
|
|
0% {
|
|
box-shadow: 9999px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 9999px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 9999px 0 0 -5px;
|
|
}
|
|
}
|
|
@-webkit-keyframes dot-pulse-after {
|
|
0% {
|
|
box-shadow: 10014px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 10014px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 10014px 0 0 -5px;
|
|
}
|
|
}
|
|
@keyframes dot-pulse-after {
|
|
0% {
|
|
box-shadow: 10014px 0 0 -5px;
|
|
}
|
|
30% {
|
|
box-shadow: 10014px 0 0 2px;
|
|
}
|
|
60%, 100% {
|
|
box-shadow: 10014px 0 0 -5px;
|
|
}
|
|
} |