Hiệu ứng loading đẹp bằng CSS

27/04/2019

Bài sau » « Bài trước

Thay vì dùng ảnh gif để làm hiệu ứng loading. Thì chỉ với vài dòng CSS ta cũng làm được những hiệu ứng đẹp không kém. Cùng xem qua vài hiệu ứng loading đẹp bằng CSS dưới đây nhé.


Hiệu ứng 1


<div id="hieuung1"></div> #hieuung1 { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

Hiệu ứng 2


<div id="hieuung2"> <span class="double-bounce1"></span> <span class="double-bounce2"></span> </div> #hieuung2{ width: 40px; height: 40px; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #333; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }

Hiệu ứng 3


<div id="hieuung3"> <span class="rect1"></span> <span class="rect2"></span> <span class="rect3"></span> <span class="rect4"></span> <span class="rect5"></span> </div> #hieuung3{ margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } #hieuung3 > span { background-color: #333; height: 100%; width: 6px; display: inline-block; margin-right: 3px; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } #hieuung3 .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #hieuung3 .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } #hieuung3 .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } #hieuung3 .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Hiệu ứng 4


<div id="hieuung4"> <span class="cube1"></span> <span class="cube2"></span> </div> #hieuung4{ margin: 100px auto; width: 40px; height: 40px; position: relative; } .cube1, .cube2 { background-color: #333; width: 15px; height: 15px; position: absolute; top: 0; left: 0; -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; animation: sk-cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes sk-cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } }

Hiệu ứng 5


<div id="hieuung5"></div> #hieuung5{ width: 40px; height: 40px; margin: 100px auto; background-color: #333; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } }

Hiệu ứng 6


<div id="hieuung6"> <span class="circle1"></span> <span class="circle2"></span> <span class="circle3"></span> </div> #hieuung6{ margin: 100px auto; width: 70px; text-align: center; } #hieuung6 > span { width: 18px; height: 18px; background-color: #333; margin-right: 5px; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } #hieuung6 .circle1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } #hieuung6 .circle2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }

Hiệu ứng 7


<div id="hieuung7"> <span class="sk-circle1 sk-child"></span> <span class="sk-circle2 sk-child"></span> <span class="sk-circle3 sk-child"></span> <span class="sk-circle4 sk-child"></span> <span class="sk-circle5 sk-child"></span> <span class="sk-circle6 sk-child"></span> <span class="sk-circle7 sk-child"></span> <span class="sk-circle8 sk-child"></span> <span class="sk-circle9 sk-child"></span> <span class="sk-circle10 sk-child"></span> <span class="sk-circle11 sk-child"></span> <span class="sk-circle12 sk-child"></span> </div> #hieuung7{ margin: 100px auto; width: 40px; height: 40px; position: relative; } #hieuung7 .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #hieuung7 .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } #hieuung7 .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } #hieuung7 .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } #hieuung7 .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #hieuung7 .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } #hieuung7 .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } #hieuung7 .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #hieuung7 .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } #hieuung7 .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } #hieuung7 .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } #hieuung7 .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } #hieuung7 .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } #hieuung7 .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #hieuung7 .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } #hieuung7 .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } #hieuung7 .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } #hieuung7 .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } #hieuung7 .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } #hieuung7 .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } #hieuung7 .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } #hieuung7 .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } #hieuung7 .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } #hieuung7 .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }

Hiệu ứng 8


<div id="hieuung8"> <span class="sk-cube sk-cube1"></span> <span class="sk-cube sk-cube2"></span> <span class="sk-cube sk-cube3"></span> <span class="sk-cube sk-cube4"></span> <span class="sk-cube sk-cube5"></span> <span class="sk-cube sk-cube6"></span> <span class="sk-cube sk-cube7"></span> <span class="sk-cube sk-cube8"></span> <span class="sk-cube sk-cube9"></span> </div> #hieuung8{ width: 40px; height: 40px; margin: 100px auto; } #hieuung8 .sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } #hieuung8 .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #hieuung8 .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #hieuung8 .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #hieuung8 .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #hieuung8 .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #hieuung8 .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #hieuung8 .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } #hieuung8 .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #hieuung8 .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }

Trên đây là các hiệu ứng loading đẹp bằng CSS, theo các bạn hiệu ứng nào đẹp nhất. Hãy để lại bình luận ở dưới nhé.

Bài sau » « Bài trước

Bình luận

@nnlinhth6 27/04/2019

Thanks admin. Mình đã tìm đc hiệu ứng phù hợp.
Back to top