Dots in Circle
Home
Snippets
Dots in Circle
HTML
CSS
JS
<div class="peeek-loading"> <ul id="loading-dots"></ul> </div>
.peeek-loading { background-color: #000; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; } .peeek-loading ul li span { content: ""; background-color: #fff; display: block; width: 1.4em; height: 1.4em; border-radius: 100%; animation: dotAnimationTwo 4.5s infinite; } .peeek-loading ul { position: absolute; left: calc(50% - 0.7em); top: calc(50% - 4.2em); display: inline-block; list-style: none; } .peeek-loading ul li { position: absolute; width: 1.4em; height: 1.4em; border-radius: 100%; top: 0; left: 0; padding-bottom: 5.6em; animation: dotAnimation 4.5s infinite; } @keyframes dotAnimation { 0%, 55%, 100% { padding: 0 0 5.6em 0; } 5%, 50% { padding: 2.8em 0; } } @keyframes dotAnimationTwo { 0%, 55%, 100% { opacity: 1; transform: scale(1); } 5%, 50% { opacity: 0.5; transform: scale(0.5); } }
const dotCount = 10; const animationTime = 2.5; const loadingDots = document.getElementById('loading-dots'); for (let i = 1; i <= dotCount; i++) { const li = document.createElement('li'); li.style.transform = `rotate(${(i - 1) * (360 / dotCount)}deg)`; li.style.animationDelay = `${animationTime * i / dotCount / 2}s`; const span = document.createElement('span'); span.style.animationDelay = `${animationTime * i / dotCount / 2}s`; li.appendChild(span); loadingDots.appendChild(li); }
Ad #1
Ad #2
Scroll to Top