a mí

2678 ilham

Abrir en el editor Video Publica tu código

Recomendado

18 May 2025

Un código de youssefdahroug2005

13 June 2025

Un código de Metehan

19 November 2025

Pantalla de carga animada con puntos en CSS

HTML

CSS

JS

/* Replace with your JS Code 
(Leave empty if not needed) */
let isFirefox = typeof InstallTrigger !== 'undefined';
const words = "ANGGIE ANNISA RAMADHANI";

let ANGLE = 360;
const ANIMATION_DURATION = 4000;

const animation = () => {
  ANGLE -= 1; // Incremento do ângulo
  document.querySelectorAll(".spiral *").forEach((el, i) => {
    
    const translateY = Math.sin(ANGLE * (Math.PI / 120)) * 100;
    const scale = Math.cos(ANGLE * (Math.PI / 120)) * 0.5 + 0.5;
    
    
    const offset = parseInt(el.dataset.offset);
    const delay = i * (ANIMATION_DURATION / 16) - offset;

setTimeout(() => {
      el.style.transform = `translateY(${translateY}px) scale(${scale})`;
    }, delay);
  });

requestAnimationFrame(animation);
};

const characters = words.split("").forEach((char, i) => {
  const createElement = (offset) => {
    const div = document.createElement("div");
    div.innerText = char;
    div.classList.add("character");
    div.setAttribute("data-offset", offset);
    div.style.animationDelay = `-${i * (ANIMATION_DURATION / 16) - offset}ms`
    return div;
  };

document.querySelector("#spiral").append(createElement(0));
  document
    .querySelector("#spiral2")
    .append(createElement((isFirefox ? 1 : -1) * (ANIMATION_DURATION / 2)));
});

// @property CSS doesn't work in Firefox, so it must be animated using JavaScript.
if(isFirefox){
  animation();
}

Recomendado

Un código de youssefdahroug2005

Un código de Metehan

Pantalla de carga animada con puntos en CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS