<div id="container">
<p id="count">1</p>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<p class="message">Requires a browser that supports CSS Motion Path spec with the offset-* naming</p>
$back: #863334;
$primary: #f5f5fb;
$duration: 3200ms;
#count, .dot {
offset-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
position: absolute;
}
#count {
animation: pathy $duration infinite linear;
offset-distance: 0;
color: $primary;
display: inline-block; //none; //inline-block;
text-align: center;
}
.dot {
display: inline-block;
width: .4rem;
height: .4rem;
background: $primary;
border-radius: 50%;
opacity: 0;
animation: pulse $duration infinite ease-in-out;
&:nth-of-type(1) {
offset-distance: 10%;
animation-delay: ($duration/10);
}
&:nth-of-type(2) {
offset-distance: 20%;
animation-delay: ($duration/10 * 2);
}
&:nth-of-type(3) {
offset-distance: 30%;
animation-delay: ($duration/10 * 3);
}
&:nth-of-type(4) {
offset-distance: 40%;
animation-delay: ($duration/10 * 4);
}
&:nth-of-type(5) {
offset-distance: 50%;
animation-delay: ($duration/10 * 5);
}
&:nth-of-type(6) {
offset-distance: 60%;
animation-delay: ($duration/10 * 6);
}
&:nth-of-type(7) {
offset-distance: 70%;
animation-delay: ($duration/10 * 7);
}
&:nth-of-type(8) {
offset-distance: 80%;
animation-delay: ($duration/10 * 8);
}
&:nth-of-type(9) {
offset-distance: 90%;
animation-delay: ($duration/10 * 9);
}
&:nth-of-type(10) {
offset-distance: 0%;
animation-delay: 0ms;
}
&:nth-of-type(11) {
offset-distance: 5%;
animation-delay: ($duration/20);
}
&:nth-of-type(12) {
offset-distance: 15%;
animation-delay: ($duration/20 * 3);
}
&:nth-of-type(13) {
offset-distance: 25%;
animation-delay: ($duration/20 * 5);
}
&:nth-of-type(14) {
offset-distance: 35%;
animation-delay: ($duration/20 * 7);
}
&:nth-of-type(15) {
offset-distance: 45%;
animation-delay: ($duration/20 * 9);
}
&:nth-of-type(16) {
offset-distance: 55%;
animation-delay: ($duration/20 * 11);
}
&:nth-of-type(17) {
offset-distance: 65%;
animation-delay: ($duration/20 * 13);
}
&:nth-of-type(18) {
offset-distance: 75%;
animation-delay: ($duration/20 * 15);
}
&:nth-of-type(19) {
offset-distance: 85%;
animation-delay: ($duration/20 * 17);
}
&:nth-of-type(20) {
offset-distance: 95%;
animation-delay: ($duration/20 * 19);
}
}
@keyframes pathy {
100% {
offset-distance: 100%;
}
}
@keyframes pulse {
20% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.message {
display: none;
.no-motionpath & {
display: block;
color: $primary;
padding: 1rem;
}
}
body {
background: $back;
background: radial-gradient(circle, #a65354 0%, $back 100%) center center no-repeat;
font-family: "Helvetica Neue", Arial, sans-serif;
height: 100vh;
}
#container {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 100px;
.no-motionpath & {
display: none;
}
}
View Compiled
var p = document.getElementById('count');
if (p.style.offsetPath !== undefined) {
var counter = 2;
p.addEventListener('animationiteration', function(e) {
p.textContent = (counter++);
});
} else {
document.documentElement.classList.add('no-motionpath');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.