Downloader Animation

jitesh208
Jan 13, 2026 4
Live Preview

Live Editor

<button>download</button>
html {
  background: #000;
}

body {
  background: #000;
  text-align: center;
}

button {
  box-sizing: border-box;
  margin-top: calc(50vh - 2em);
  border: solid 0.25em transparent;
  padding: 1px;
  width: 10em;
  border-radius: 5px;
  box-shadow:
    1px 1px 1px -1px rgba(85, 85, 85, 0.75),
    1px 1px 2px -1px rgba(85, 85, 85, 0.75);

  background:
    radial-gradient(rgba(90, 90, 90, 0.65) 25%, rgba(90, 90, 90, 0) 75%)
      0 0 / 100% 0.125em no-repeat padding-box,

    repeating-linear-gradient(
      45deg,
      rgba(12, 12, 12, 0.35),
      transparent 1px,
      transparent 3px,
      rgba(12, 12, 12, 0.35) 4px
    ) content-box,

    repeating-linear-gradient(
      -45deg,
      rgba(12, 12, 12, 0.35),
      transparent 1px,
      transparent 3px,
      rgba(12, 12, 12, 0.35) 4px
    ) content-box,

    linear-gradient(#2a2a2a, #050505) content-box,
    linear-gradient(#323232, #232323) padding-box,

    linear-gradient(#3bc8ef, rgba(59, 200, 239, 0.1))
      0 / 0 100% no-repeat border-box,

    repeating-linear-gradient(
      45deg,
      rgba(34, 34, 34, 0.25),
      transparent 1px,
      transparent 3px,
      rgba(34, 34, 34, 0.25) 4px
    ) border-box,

    repeating-linear-gradient(
      -45deg,
      rgba(34, 34, 34, 0.25),
      transparent 1px,
      transparent 3px,
      rgba(34, 34, 34, 0.25) 4px
    ) border-box,

    linear-gradient(#3bc8ef, rgba(59, 200, 239, 1))
      0 / 0 100% no-repeat border-box,

    linear-gradient(#151515, #2e2e2e) border-box;

  color: #fff;
  font: 500 1.25em/2.4 verdana, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

button:not(.loading):active {
  transform: scale(0.98);
}

button:focus {
  outline: none;
  box-shadow: 1px 1px 1px -1px rgba(59, 200, 239, 0.5);
}

.loading {
  position: relative;
  color: transparent;
  cursor: auto;
}

.loading::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #3bc8ef;
  content: attr(data-perc);
}
var rID = null;

var load = function(el, s, t) {
	var perc, k = 2;
	
	if(t%k === 0) {
		perc = t/k;
		el.dataset.perc = perc + '%';
		el.style.backgroundSize = 
			s.replace(/0px/g, el.dataset.perc);
		
		if(perc === 100) {
			cancelAnimationFrame(rID);
			rID = null;
			return;
		}
	}
	
	rID = requestAnimationFrame(
		load.bind(this, el, s, ++t)
	);
};

document.querySelector('button')
	.addEventListener('click', function() {
	var s;
	
	if(!rID) {
		this.classList.toggle('loading');
		s = getComputedStyle(this).backgroundSize;
		if(this.classList.contains('loading'))
			load(this, s, 0);
		else {
			this.dataset.perc = 
			this.style.backgroundSize = ''
		}
	}
}, false);
Categories

Downloader Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
