CSS Loading 02 - DevForum



DevForum chia sẻ các bạn mẫu CSS Loading 02 chờ Loading page tuyệt hảo có một không hai

1. HTML

<div id="wrap">
	<div class="loading outer">
		<div class="loading inner"></div>
	</div>
</div>

2. CSS

.loading {
			box-sizing: border-box;
			position: relative;
			display: inline-block;
			padding: 0.5em;
			vertical-align: middle;
			text-align: center;
			background-color: transparent;
			border: 5px solid transparent;
			border-top-color: #f60;
			border-bottom-color: #f60;
			border-radius: 50% 0;
			box-shadow: 0 0 0.25em #f60 inset;
		}

		.outer {
			animation: spin 1.5s infinite linear;
		}

		.inner {
			animation: spin 1.5s infinite linear;
		}

		@keyframes spin {
			0% {
				transform: rotateZ(0deg);
			}
			100% {
				transform: rotateZ(360deg);
			}
		}
		/* styling */
		html {
			width: 100%;
			height: 100%;
			background: radial-gradient(circle, #ffffff 0%, #aaaaaa 100%) no-repeat;
			overflow-x: hidden;
			overflow-y: hidden;
		}

		body {
			text-align: center;
			display: table;
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: hidden;
		}

		#wrap {
			box-sizing: border-box;
			display: table-cell;
			vertical-align: middle;
		}

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.