tenkuma/pandora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change loading animation to Sven Scharfenberg's that does not rely on JS.

Browse source
This commit is contained in:
天クマ 2026-07-17 21:07:08 -03:00
commit 73e0496260
3 changed files with 111 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -12,15 +12,6 @@
<link rel="stylesheet" href="metroicons.css">
</head>
<body>
<script defer>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
document.querySelectorAll(".dots").forEach(el => {
el.classList.add("animate");
});
}, 100);
});
</script>
<div class="app-container no-active-chat">
<aside id="desktop-aside">
<button id="chats-sidebar-btn" class="icon-btn mif-qa mif-2x" data-page="chat-page"></button>
@ -47,12 +38,14 @@
<div class="chat-list-container">
<div class="loading-chats" id="chats-loader">
<div class='dots'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class='loading-animation-wrapper'>
<div class="animation">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<ul class="chat-list" id="chat-list">

17
js/app.js
View file

@ -224,16 +224,15 @@ async function selectChat(chat, isPopState = false, smoothScroll = true) {
elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
elements.messagesContainer.innerHTML = `
<div class="loading-chats">
<div class='dots'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class='loading-animation-wrapper'>
<div class="animation">
<p class="animation"></p>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Loading messages...
</span>
</div>`;
elements.appContainer.classList.remove('no-active-chat');

185
loading.css
View file

@ -1,91 +1,116 @@
.dots {
.loading-animation-wrapper {
width: 200px;
height: 40px;
margin: 10px auto 0 auto;
padding-top: 4px;
}
.loading-animation-wrapper .caption {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font: 12px/1.4em Arial;
}
.loading-animation-wrapper .dot {
position: relative;
width: 100%;
}
.dots span:nth-child(1) {
animation-delay: 0.05s;
}
.dots span:nth-child(1):after {
left: -20px;
}
.dots span:nth-child(2) {
animation-delay: 0.1s;
}
.dots span:nth-child(2):after {
left: -40px;
}
.dots span:nth-child(3) {
animation-delay: 0.15s;
}
.dots span:nth-child(3):after {
left: -60px;
}
.dots span:nth-child(4) {
animation-delay: 0.2s;
}
.dots span:nth-child(4):after {
left: -80px;
}
.dots span:nth-child(5) {
animation-delay: 0.25s;
}
.dots span:nth-child(5):after {
left: -100px;
}
.dots span {
display: inline-block;
position: absolute;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 10px;
height: 10px;
background: #fff;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-animation: movingdot 4s infinite;
-webkit-animation: movingdot 4s infinite;
animation: movingdot 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
-webkit-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading-animation-wrapper .dot:nth-child(1) {
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loading-animation-wrapper .dot:nth-child(2) {
-moz-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.loading-animation-wrapper .dot:nth-child(3) {
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.loading-animation-wrapper .dot:nth-child(4) {
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.loading-animation-wrapper .dot:nth-child(5) {
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.dots span:after {
content: "";
position: absolute;
display: inline-block;
background-color: #f0f0f0;
width: 8px;
height: 8px;
border-radius: 50%;
}
.dots.animate span {
animation-name: dots;
}
@keyframes dots {
0%,20% {
left: 0;
animation-timing-function: ease-out;
@-moz-keyframes movingdot {
0% {
-moz-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0;
}
25% {
opacity: 1;
}
35% {
left: 45%;
animation-timing-function: linear;
}
65% {
left: 55%;
animation-timing-function: ease-in;
}
75% {
opacity: 1;
}
80%,100% {
left: 100%;
50% {
-moz-transform: translateX(200px);
transform: translateX(200px);
opacity: 0;
}
}
100% {
opacity: 0;
}
}
@-webkit-keyframes movingdot {
0% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0;
}
25% {
opacity: 1;
}
50% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes movingdot {
0% {
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0;
}
25% {
opacity: 1;
}
50% {
-moz-transform: translateX(200px);
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
opacity: 0;
}
100% {
opacity: 0;
}
}