Code Loading Bar HTML và CSS

Chia sẻ

---

1. HTML

<div class="loading">
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
	</div>

2. CSS

body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #ECEFFC;
		}

		.loading {
			--loading-width: 45px;
			position: relative;
			width: var(--loading-width);
			height: var(--loading-width);
			transform: rotate(75deg);
		}
		.loading .bar {
			position: absolute;
			animation: 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
		}
		.loading .bar:nth-child(1) {
			bottom: calc(var(--loading-width) / 3);
			width: calc(var(--loading-width) / 3);
			height: 100%;
			background: #0984e3;
			transform: scaleY(0);
			transform-origin: bottom;
			animation-name: slide-bottom-top;
		}
		.loading .bar:nth-child(2) {
			left: calc(var(--loading-width) / 3);
			width: 100%;
			height: calc(var(--loading-width) / 3);
			background: #d63031;
			transform: scaleX(0);
			transform-origin: left;
			animation-name: slide-left-right;
		}
		.loading .bar:nth-child(3) {
			top: calc(var(--loading-width) / 3);
			right: 0;
			width: calc(var(--loading-width) / 3);
			height: 100%;
			background: #fdcb6e;
			transform: scaleY(0);
			transform-origin: top;
			animation-name: slide-top-bottom;
		}
		.loading .bar:nth-child(4) {
			right: calc(var(--loading-width) / 3);
			bottom: 0;
			width: 100%;
			height: calc(var(--loading-width) / 3);
			background: #00b894;
			transform: scaleX(0);
			transform-origin: right;
			animation-name: slide-right-left;
		}

		@keyframes slide-bottom-top {
			50% {
				transform: scaleY(1);
				transform-origin: bottom;
			}
			50.1% {
				transform-origin: top;
			}
			to {
				transform-origin: top;
			}
		}
		@keyframes slide-left-right {
			50% {
				transform: scaleX(1);
				transform-origin: left;
			}
			50.1% {
				transform-origin: right;
			}
			to {
				transform-origin: right;
			}
		}
		@keyframes slide-top-bottom {
			50% {
				transform: scaleY(1);
				transform-origin: top;
			}
			50.1% {
				transform-origin: bottom;
			}
			to {
				transform-origin: bottom;
			}
		}
		@keyframes slide-right-left {
			50% {
				transform: scaleX(1);
				transform-origin: right;
			}
			50.1% {
				transform-origin: left;
			}
			to {
				transform-origin: left;
			}
		}

3. JAVASCRIPT

---