This article will share with you 10 loading loading effects, guaranteed to make your project shine. I hope it will be helpful to everyone, come and collect it! !
#I believe that everyone often uses loading animation, but the loading style of most component libraries is too simple.
This time I collected 10 high-end loading animation effects for the front-end workers! ! Just copy it and use it directly! !
The jumping and rotating blocks plus the gradient The shadow simply forms a picture of an object rolling
/* loading.css */ .boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .boxLoading:before { content: ''; width: 50px; height: 5px; background: #fff; opacity: 0.7; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } .boxLoading:after { content: ''; width: 50px; height: 50px; background: #e04960; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } }
Author: Dicson
#What will happen when each disappearing block is integrated and different disappearing times are set?
/* loading.css */ .sk-cube-grid { width: 4em; height: 4em; margin: auto; } .sk-cube { width: 33%; height: 33%; background-color: #e04960; float: left; animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out; } .sk-cube-1 { animation-delay: 0.2s; } .sk-cube-2 { animation-delay: 0.3s; } .sk-cube-3 { animation-delay: 0.4s; } .sk-cube-4 { animation-delay: 0.1s; } .sk-cube-5 { animation-delay: 0.2s; } .sk-cube-6 { animation-delay: 0.3s; } .sk-cube-7 { animation-delay: 0s; } .sk-cube-8 { animation-delay: 0.1s; } .sk-cube-9 { animation-delay: 0.2s; } @keyframes sk-cube-grid-scale-delay { 0%, 70%, 100% { transform: scale3D(1,1,1); } 35% { transform: scale3D(0,0,1); } }
Author: Nicola Pressi
What phenomenon will occur if four sickles are slashed back and forth?
/* loading.css */ .spinner { position: absolute; width: 128px; height: 128px; top: calc(50% - 64px); left: calc(50% - 64px); transform: perspective(206px) rotateX(45deg); } .outer { box-sizing: border-box; animation: spin 3s linear infinite; height: 100%; } .inner { position: absolute; border-radius: 50%; width: 64px; height: 64px; animation: spin 1.8s ease-in-out infinite; } .inner.tl { top: 0; left: 0; border-top: 2px solid #531430; border-left: 4px solid #531430; } .inner.tr { top: 0; right: 0; border-top: 2px solid #e04960; border-right: 4px solid #e04960; } .inner.br { bottom: 0; right: 0; border-bottom: 2px solid #531430; border-right: 4px solid #531430; } .inner.bl { bottom: 0; left: 0; border-bottom: 2px solid #e04960; border-left: 4px solid #e04960; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Author: Martin van Driel
Simple square rotation and internal height control can achieve the filling effect~
/* loading.css */ .loading { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #e04960; animation: loader 4s infinite ease; } .loading-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #e04960; animation: loader-inner 4s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } }
Author: Josh
1 element scaling is very simple, what will happen to the 15?
/* loading.css */ .loader { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 175px; height: 100px; } .loader span { display: block; background: #e04960; width: 7px; height: 100%; border-radius: 14px; margin-right: 5px; float: left; } .loader span:last-child { margin-right: 0px; } .loader span:nth-child(1) { animation: load 2.5s 1.4s infinite linear; } .loader span:nth-child(2) { animation: load 2.5s 1.2s infinite linear; } .loader span:nth-child(3) { animation: load 2.5s 1s infinite linear; } .loader span:nth-child(4) { animation: load 2.5s 0.8s infinite linear; } .loader span:nth-child(5) { animation: load 2.5s 0.6s infinite linear; } .loader span:nth-child(6) { animation: load 2.5s 0.4s infinite linear; } .loader span:nth-child(7) { animation: load 2.5s 0.2s infinite linear; } .loader span:nth-child(8) { animation: load 2.5s 0s infinite linear; } .loader span:nth-child(9) { animation: load 2.5s 0.2s infinite linear; } .loader span:nth-child(10) { animation: load 2.5s 0.4s infinite linear; } .loader span:nth-child(11) { animation: load 2.5s 0.6s infinite linear; } .loader span:nth-child(12) { animation: load 2.5s 0.8s infinite linear; } .loader span:nth-child(13) { animation: load 2.5s 1s infinite linear; } .loader span:nth-child(14) { animation: load 2.5s 1.2s infinite linear; } .loader span:nth-child(15) { animation: load 2.5s 1.4s infinite linear; } @keyframes load { 0% { background: #531430; transform: scaleY(0.08); } 50% { background: #e04960; transform: scaleY(1); } 100% { background: #531430; transform: scaleY(0.08); } }
Author: Dicson
The combination of element transparency and height can also create unique effects
/* loading.css */ .bars { height: 30px; left: 50%; margin: -30px 0 0 -20px; position: absolute; top: 60%; width: 40px; } .bar { background: #e04960; bottom: 1px; height: 3px; position: absolute; width: 3px; animation: sound 0ms -800ms linear infinite alternate; } @keyframes sound { 0% { opacity: .35; height: 3px; } 100% { opacity: 1; height: 28px; } } .bar:nth-child(1) { left: 1px; animation-duration: 474ms; } .bar:nth-child(2) { left: 5px; animation-duration: 433ms; } .bar:nth-child(3) { left: 9px; animation-duration: 407ms; } .bar:nth-child(4) { left: 13px; animation-duration: 458ms; } .bar:nth-child(5) { left: 17px; animation-duration: 400ms; } .bar:nth-child(6) { left: 21px; animation-duration: 427ms; } .bar:nth-child(7) { left: 25px; animation-duration: 441ms; } .bar:nth-child(8) { left: 29px; animation-duration: 419ms; } .bar:nth-child(9) { left: 33px; animation-duration: 487ms; } .bar:nth-child(10) { left: 37px; animation-duration: 442ms; }
Author: El Alemaño
4 circles can actually produce a relatively repulsive effect?
/* loading.css */ .loading { position: absolute; top: calc(50% - 24px); left: calc(50% - 24px); width: 48px; height: 48px; border-radius: 50%; transform: perspective( 128px ) rotateX( 30deg ); } .inner { position: absolute; box-sizing: border-box; width: 16px; height: 16px; background-color: #e04960; border-radius: 50%; } .inner.one { left: 0%; top: 0%; animation: move-right 1s ease-out infinite; } .inner.two { right: 0%; top: 0%; animation: move-down 1s ease-in-out infinite; } .inner.three { right: 0%; bottom: 0%; animation: move-left 1s ease-in-out infinite; } .inner.four { left: 0%; bottom: 0%; animation: move-up 1s ease-out infinite; } @keyframes move-right { 0% { transform: translateX(0); } 100% { transform: translateX(32px); } } @keyframes move-down { 0% { transform: translateY(); } 100% { transform: translateY(32px); } } @keyframes move-left { 0% { transform: translateX(0); } 100% { transform: translateX(-32px); } } @keyframes move-up { 0% { transform: translateY(0); } 100% { transform: translateY(-32px); } }
Author: Martin van Driel
8. A "marble" loadingThe small marbles moving back and forth one by one can actually paint such a wonderful picture
/* loading.css */ .container { width: 200px; height: 100px; margin: 0 auto; } .ball { width: 10px; height: 10px; margin: 10px auto; border-radius: 50px; } .ball:nth-child(1) { background: #e04960; -webkit-animation: right 1s infinite ease-in-out; -moz-animation: right 1s infinite ease-in-out; animation: right 1s infinite ease-in-out; } .ball:nth-child(2) { background: #e04960; -webkit-animation: left 1.1s infinite ease-in-out; -moz-animation: left 1.1s infinite ease-in-out; animation: left 1.1s infinite ease-in-out; } .ball:nth-child(3) { background: #e04960; -webkit-animation: right 1.05s infinite ease-in-out; -moz-animation: right 1.05s infinite ease-in-out; animation: right 1.05s infinite ease-in-out; } .ball:nth-child(4) { background: #e04960; -webkit-animation: left 1.15s infinite ease-in-out; -moz-animation: left 1.15s infinite ease-in-out; animation: left 1.15s infinite ease-in-out; } .ball:nth-child(5) { background: #e04960; -webkit-animation: right 1.1s infinite ease-in-out; -moz-animation: right 1.1s infinite ease-in-out; animation: right 1.1s infinite ease-in-out; } .ball:nth-child(6) { background: #e04960; -webkit-animation: left 1.05s infinite ease-in-out; -moz-animation: left 1.05s infinite ease-in-out; animation: left 1.05s infinite ease-in-out; } .ball:nth-child(7) { background: #e04960; -webkit-animation: right 1s infinite ease-in-out; -moz-animation: right 1s infinite ease-in-out; animation: right 1s infinite ease-in-out; } @-webkit-keyframes right { 0% { -webkit-transform: translate(-15px); } 50% { -webkit-transform: translate(15px); } 100% { -webkit-transform: translate(-15px); } } @-webkit-keyframes left { 0% { -webkit-transform: translate(15px); } 50% { -webkit-transform: translate(-15px); } 100% { -webkit-transform: translate(15px); } } @-moz-keyframes right { 0% { -moz-transform: translate(-15px); } 50% { -moz-transform: translate(15px); } 100% { -moz-transform: translate(-15px); } } @-moz-keyframes left { 0% { -moz-transform: translate(15px); } 50% { -moz-transform: translate(-15px); } 100% { -moz-transform: translate(15px); } } @keyframes right { 0% { transform: translate(-15px); } 50% { transform: translate(15px); } 100% { transform: translate(-15px); } } @keyframes left { 0% { transform: translate(15px); } 50% { transform: translate(-15px); } 100% { transform: translate(15px); } }
Author: Richie
Each circle is glued and split to form a glue effect
/* loading.css */ .loading { width: 166px; height: 166px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-filter: url("#goo"); filter: url("#goo"); } .loading span { width: 100%; text-align: center; color: #e04960; font-weight: bold; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; position: absolute; left: 1px; top: 46%; } .loading:before, .loading:after { content: ''; border-radius: 50%; background-color: #e04960; width: 26px; height: 26px; position: absolute; left: 72px; top: 8px; animation: rotate 6s linear; animation-iteration-count: infinite; transform-origin: 12px 76px; } .loading:before { box-shadow: 45px 19px 0px 0px #e04960, 62px 63px 0px 0px #e04960, 45px 107px 0px 0px #e04960, 0px 126px 0px 0px #e04960, -46px 107px 0px 0px #e04960, -63px 63px 0px 0px #e04960, -46px 19px 0px 0px #e04960; } .loading:after { animation-direction: reverse; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
Author: Dicson
Clever use of displacement can also create the effect of collision and extrusion
/* loading.css */ .loader { display: block; position: relative; height: 20px; width: 86px; } .loading-square { position: absolute; height: 20px; width: 20px; top: 0; } .loading-square:nth-child(1) { left: 0; animation: square1 1.5s linear forwards infinite; } .loading-square:nth-child(2) { left: 22px; animation: square2 1.5s linear forwards infinite; } .loading-square:nth-child(3) { left: 44px; animation: square3 1.5s linear forwards infinite; } .loading-square:nth-child(4) { left: 66px; animation: square4 1.5s linear forwards infinite; } @keyframes square1 { 0% { background-color: #97c900; transform: translate(0, 0); } 9.09091% { transform: translate(0, calc(-100% - 2px)); background-color: #97c900; } 18.18182% { transform: translate(calc(100% + 2px), calc(-100% - 2px)); background-color: #15668a; } 27.27273% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: #15668a; transform: translate(calc(100% + 2px), 0); } } @keyframes square2 { 0% { background-color: #15668a; transform: translate(0, 0); } 18.18182% { transform: translate(0, 0); } 27.27273% { transform: translate(0, calc(100% + 2px)); background-color: #15668a; } 36.36364% { transform: translate(calc(100% + 2px), calc(100% + 2px)); background-color: #D53A33; } 45.45455% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: #D53A33; transform: translate(calc(100% + 2px), 0); } } @keyframes square3 { 0% { background-color: #D53A33; transform: translate(0, 0); } 36.36364% { transform: translate(0, 0); } 45.45455% { transform: translate(0, calc(-100% - 2px)); background-color: #D53A33; } 54.54545% { transform: translate(calc(100% + 2px), calc(-100% - 2px)); background-color: #E79C10; } 63.63636% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: #E79C10; transform: translate(calc(100% + 2px), 0); } } @keyframes square4 { 0% { transform: translate(0, 0); background-color: #E79C10; } 54.54545% { transform: translate(0, 0); } 63.63636% { transform: translate(0, calc(100% + 2px)); background-color: #E79C10; } 72.72727% { background-color: #D53A33; } 81.81818% { background-color: #15668a; } 90.90909% { transform: translate(calc(-300% - 6px), calc(100% + 2px)); background-color: #97c900; } 100% { transform: translate(calc(-300% - 6px), 0); background-color: #97c900; } }
Author: Paul Grant
Students with Switch should be familiar with it. This is the loading in eshop
Copy after login/* loading.css */ .load{ width: 400px; height: 170px; } @keyframes loader { 0%{ background: #FF8919; width:0%; }20%{ width:100%; }39%{ background: #FF8919; }40%{ background: #FFA54F; width: 0% }60%{ width: 100%; }80%{ width:0%; }100%{ background: #FFA54F; width: 0%; } } @keyframes loaderAlt { 0%{ background: #FF7C00; width:100%; }19%{ background: #FF7C00; }20%{ background: #FF9834; width: 0%; }40%{ width: 100%; }59%{ background: #FF9834; }60%{ background: #FF7C00; width: 0; }80%{ width: 100%; }100%{ background: #FF7C00; width: 100% } } .loading{ display: flex; flex-direction: column; height: 100%; position: relative; width: 100%; } .loader__bar{ display: flex; flex: 1; position: relative; width: 100%; } .loader__bar:before{ animation: loader ease 8s infinite; animation-delay: 100ms; background: #FF7C00; background-size: 200% 200%; content: ""; height:100%; width: 0%; } .loader__bar:after{ animation: loaderAlt ease 8s infinite; animation-delay: 100ms; background: #FF7C00; background-size: 200% 200%; content: ""; height: 100%; width: 100%; } .loader__bar--delay-1:before, .loader__bar--delay-1:after{ animation-delay: 200ms; } .loader__bar--delay-2:before, .loader__bar--delay-2:after{ animation-delay: 300ms; } .loader__bar--delay-3:before, .loader__bar--delay-3:after{ animation-delay: 400ms; } .loader__bar--delay-4:before, .loader__bar--delay-4:after{ animation-delay: 500ms; } .loader__bar--delay-5:before, .loader__bar--delay-5:after{ animation-delay: 600ms; }Copy after loginAuthor: Steve Meredith
For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of 10+ CSS loading effects to make your project shine, come and collect them! !. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
