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

							

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.