Code Loading Dots với HTML và CSS



Mẫu code Loading Dots kiểu chấm bi tròn với HTML và CSS

1. HTML

							

2. CSS

							* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			width: 100%;
			height: 100vh;
			background: #270045;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}

		.container {
			width: 400px;
			height: 200px;
			display: grid;
			place-items: center;
		}
		.container .loader {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}
		.container .loader .l {
			position: relative;
			width: 30px;
			height: 30px;
			background: transparent;
			margin: 0 15px;
		}
		.container .loader .l:after, .container .loader .l:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			left: 0;
			top: 0;
			border-radius: 50%;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
		}
		.container .loader .l:after {
			transform: translateY(-500%);
			animation: fall_after 2s cubic-bezier(0.75, -0.4, 0, 1.6) infinite;
			animation-delay: calc( 1s - ( 0.15s * ( var(--index)) ) );
		}
		.container .loader .l:before {
			transform: translateY(0%);
			animation: fall_before 2s cubic-bezier(0.75, -0.4, 0, 1.6) infinite;
			animation-delay: calc( 1s - ( 0.15s * ( var(--index)) ) );
		}
		.container .loader .l._1:after, .container .loader .l._1:before {
			background: linear-gradient(to bottom, #faa000 0, #dc6302 100%);
		}
		.container .loader .l._2:after, .container .loader .l._2:before {
			background: linear-gradient(to bottom, #fd0020 0, #c10018 100%);
		}
		.container .loader .l._3:after, .container .loader .l._3:before {
			background: linear-gradient(to bottom, #00aefc 0, #007bb2 100%);
		}
		.container .loader .l._4:after, .container .loader .l._4:before {
			background: linear-gradient(to bottom, #a800fd 0, #4f1dd4 100%);
		}

		@keyframes fall_before {
			100% {
				transform: translateY(500%);
			}
		}
		@keyframes fall_after {
			100% {
				transform: translateY(0%);
			}
		}
		.support {
			position: absolute;
			right: 10px;
			bottom: 10px;
			padding: 10px;
			display: flex;
		}

		a {
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			position: relative;
			margin: 0 10px;
			color: #fff;
			font-size: 1.5rem;
			transition: all 400ms ease;
		}

		a:hover {
			background: #fff;
			color: #222;
		}						

3. JAVASCRIPT

													



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.