Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Loaders
Simple CSS loaders
single html element css animation
.loader { --color: white; --size-mid: 6vmin; --size-dot: 1.5vmin; --size-bar: 0.4vmin; --size-square: 3vmin; display: block; position: relative; width: 50%; display: grid; place-items: center; } .loader::before, .loader::after { content: ''; box-sizing: border-box; position: absolute; } /** loader --1 **/ .loader.--1::before { width: var(--size-mid); height: var(--size-mid); border: 4px solid var(--color); border-top-color: transparent; border-radius: 50%; animation: loader-1 1s linear infinite; } .loader.--1::after { width: calc(var(--size-mid) - 2px); height: calc(var(--size-mid) - 2px); border: 2px solid transparent; border-top-color: var(--color); border-radius: 50%; animation: loader-1 0.6s linear reverse infinite; } @keyframes loader-1 { 100% { transform: rotate(1turn); } } /** loader --2 **/ .loader.--2::before, .loader.--2::after { width: var(--size-dot); height: var(--size-dot); background-color: var(--color); border-radius: 50%; opacity: 0; animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite; } .loader.--2::after { animation-delay: 0.3s; } @keyframes loader-2 { 0%, 80%, 100% { opacity: 0; } 33% { opacity: 1; } 0%, 100% { transform: translateX(-4vmin); } 90% { transform: translateX(4vmin); } } /** loader --3 **/ .loader.--3::before, .loader.--3::after { width: var(--size-dot); height: var(--size-dot); background-color: var(--color); border-radius: 50%; animation: loader-3 1.2s ease-in-out infinite; } .loader.--3::before { left: calc(50% - 1.6vmin - var(--size-dot)); } .loader.--3::after { left: calc(50% + 1.6vmin); animation-delay: -0.4s; } @keyframes loader-3 { 0%, 100% { transform: translateY(-2.6vmin); } 44% { transform: translateY(2.6vmin); } } /** loader --4 **/ .loader.--4::before { height: var(--size-bar); width: 6vmin; background-color: var(--color); animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite; } @keyframes loader-4 { 0%, 44%, 88.1%, 100% { transform-origin: left; } 0%, 100%, 88% { transform: scaleX(0); } 44.1%, 88% { transform-origin: right; } 33%, 44% { transform: scaleX(1); } } /** loader --5 **/ .loader.--5::before, .loader.--5::after { height: 3vmin; width: var(--size-bar); background-color: var(--color); animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite; } .loader.--5::before { left: calc(50% - 1vmin); top: calc(50% - 3vmin); } .loader.--5::after { left: calc(50% + 1vmin); top: calc(50% - 1vmin); animation-delay: 0.2s; } @keyframes loader-5 { 0%, 88%, 100% { opacity: 0; } 0% { transform: translateY(-6vmin); } 33% { opacity: 1; } 33%, 88% { transform: translateY(3vmin); } } /** loader --6 **/ .loader.--6::before { width: var(--size-square); height: var(--size-square); background-color: var(--color); top: calc(50% - var(--size-square)); left: calc(50% - var(--size-square)); animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @keyframes loader-6 { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } } /** loader --7 **/ .loader.--7::before, .loader.--7::after { width: var(--size-square); height: var(--size-square); background-color: var(--color); } .loader.--7::before { top: calc(50% - var(--size-square)); left: calc(50% - var(--size-square)); animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } .loader.--7::after { top: 50%; left: 50%; animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @keyframes loader-7 { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } } /** loader --8 **/ .loader.--8::before, .loader.--8::after { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background-color: var(--color); } .loader.--8::before { top: calc(50% + 4vmin); animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite; } .loader.--8::after { opacity: 0; top: calc(50% - 2vmin); animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite; } @keyframes loader-8-1 { 0%, 55%, 100% { opacity: 0; } 0% { transform: scale(0.2); } 22% { opacity: 1; } 33%, 55% { transform: scale(1) translateY(-6vmin); } } @keyframes loader-8-2 { 0%, 100% { opacity: 0; } 33% { opacity: 0.3; } 0% { transform: scale(0); } 100% { transform: scale(4); } } /** loader --9 **/ .loader.--9::before, .loader.--9::after { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background-color: var(--color); animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite; } .loader.--9::before { left: calc(50% - var(--size-dot) - 1.6vmin); } .loader.--9::after { left: calc(50% + 1.6vmin); animation-delay: 0.12s; } @keyframes loader-9 { 0%, 100% { opacity: 0; } 0% { transform: translate(-4vmin, -4vmin); } 66% { opacity: 1; } 66%, 100% { transform: none; } } /** miscs **/ .container { display: grid; grid-template-columns: repeat(3, 18vmin); grid-template-rows: repeat(3, 18vmin); grid-gap: 1vmin; } .item { background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; border-radius: 4px; transition: opacity 0.4s ease; } .container:hover .item { opacity: 0.3; } .container:hover .item:hover { opacity: 1; } .page { margin: auto; } .header { margin-bottom: 4vmin; } .header-title { font-size: 3.75vmin; } .header-subtitle { font-size: 2vmin; text-transform: uppercase; opacity: 0.6; } html, body { display: flex; width: 100%; height: 100%; background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); font-family: 'Noto Sans', sans-serif; color: white; text-align: center; letter-spacing: 0.3px; }
42
Simple CSS loaders
By:
rald_dev
.spinnerContainer { height:40px; width:40px; position:relative; margin:100px auto 0 auto; } .spinnerContainer div { height: 20px; width: 20px; border-radius: 50%; background: #c1bebe; position: absolute; top: 0; left: 0; } .spinnerContainer .ball1 { background:red; z-index:1; -moz-animation: spinner1 4s infinite ease-in-out; -webkit-animation: spinner1 4s infinite ease-in-out; } .spinnerContainer .ball2 { transform: translate(30px,0); -moz-animation: spinner2 4s infinite ease-in-out; -webkit-animation: spinner2 4s infinite ease-in-out; } .spinnerContainer .ball3 { transform: translate(30px, 30px); -moz-animation: spinner3 4s infinite ease-in-out; -webkit-animation: spinner3 4s infinite ease-in-out; } .spinnerContainer .ball4 { transform: translate(0,30px); -moz-animation: spinner4 4s infinite ease-in-out; -webkit-animation: spinner4 4s infinite ease-in-out; } .spinnerContainer .ball5 { -moz-animation: spinner5 4s infinite ease-in-out; -webkit-animation: spinner5 4s infinite ease-in-out; } @-moz-keyframes spinner1 { 0% {-moz-transform: translate(0,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,30px);} 87.5% {-moz-transform: translate(0,30px);} 100% {-moz-transform: translate(0,0);}; } @-webkit-keyframes spinner1 { 0% {-webkit-transform: translate(0,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(0,30px);} 100% {-webkit-transform: translate(0,0);}; } @-moz-keyframes spinner2 { 0% {-moz-transform: translate(30px,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,0);} 87.5% {-moz-transform: translate(30px,0);} 100% {-moz-transform: translate(30px,0);}; } @-webkit-keyframes spinner2 { 0% {-webkit-transform: translate(30px,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,0);} 87.5% {-webkit-transform: translate(30px,0);} 100% {-webkit-transform: translate(30px,0);}; } @-moz-keyframes spinner3 { 0% {-moz-transform: translate(30px,30px);} 12.5% {-moz-transform: translate(30px,30px);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,30px);} 87.5% {-moz-transform: translate(30px,30px);} 100% {-moz-transform: translate(30px,30px);}; } @-webkit-keyframes spinner3 { 0% {-webkit-transform: translate(30px,30px);} 12.5% {-webkit-transform: translate(30px,30px);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(30px,30px);} 100% {-webkit-transform: translate(30px,30px);}; } @-moz-keyframes spinner4 { 0% {-moz-transform: translate(0,50px);} 12.5% {-moz-transform: translate(0,50px);} 25% {-moz-transform: translate(0,50px);} 37.5% {-moz-transform: translate(0,50px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(50px,0);} 75% {-moz-transform: translate(50px,50px);} 87.5% {-moz-transform: translate(0,50px);} 100% {-moz-transform: translate(0,50px);}; } @-webkit-keyframes spinner4 { 0% {-webkit-transform: translate(0,30px);} 12.5% {-webkit-transform: translate(0,30px);} 25% {-webkit-transform: translate(0,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(0,30px);} 100% {-webkit-transform: translate(0,30px);}; } @-moz-keyframes spinner5 { 0% {-moz-transform: translate(0,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(0,0);} 75% {-moz-transform: translate(0,0);} 87.5% {-moz-transform: translate(0,0);} 100% {-moz-transform: translate(0,0);}; } @-webkit-keyframes spinner5 { 0% {-webkit-transform: translate(0,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(0,0);} 75% {-webkit-transform: translate(0,0);} 87.5% {-webkit-transform: translate(0,0);} 100% {-webkit-transform: translate(0,0);}; }
42
Box dots animation
By:
rald_dev
.loader { position: relative; width: 54px; height: 54px; border-radius: 10px; } .loader div { width: 8%; height: 24%; background: rgb(128, 128, 128); position: absolute; left: 50%; top: 30%; opacity: 0; border-radius: 50px; box-shadow: 0 0 3px rgba(0,0,0,0.2); animation: fade458 1s linear infinite; } @keyframes fade458 { from { opacity: 1; } to { opacity: 0.25; } } .loader .bar1 { transform: rotate(0deg) translate(0, -130%); animation-delay: 0s; } .loader .bar2 { transform: rotate(30deg) translate(0, -130%); animation-delay: -1.1s; } .loader .bar3 { transform: rotate(60deg) translate(0, -130%); animation-delay: -1s; } .loader .bar4 { transform: rotate(90deg) translate(0, -130%); animation-delay: -0.9s; } .loader .bar5 { transform: rotate(120deg) translate(0, -130%); animation-delay: -0.8s; } .loader .bar6 { transform: rotate(150deg) translate(0, -130%); animation-delay: -0.7s; } .loader .bar7 { transform: rotate(180deg) translate(0, -130%); animation-delay: -0.6s; } .loader .bar8 { transform: rotate(210deg) translate(0, -130%); animation-delay: -0.5s; } .loader .bar9 { transform: rotate(240deg) translate(0, -130%); animation-delay: -0.4s; } .loader .bar10 { transform: rotate(270deg) translate(0, -130%); animation-delay: -0.3s; } .loader .bar11 { transform: rotate(300deg) translate(0, -130%); animation-delay: -0.2s; } .loader .bar12 { transform: rotate(330deg) translate(0, -130%); animation-delay: -0.1s; }
42
Loader
By:
pixeldev
CSS3 loading animation.
Simple.
Clear.
Pure.
Simple.
* { font-family: 'Roboto',sans-serif; } h1, p { text-align: center; font-weight: 300; } h1 { font-size: 2em; } .word-spinner { font-size: 2em; height: 2em; line-height: 2em; overflow: hidden; } .word-spinner > span { display: block; } .word-spinner > span { position: relative; display: block; text-align: center; top: -100%; animation: wordspin 5s infinite; -webkit-animation: wordspin 5s infinite; } /* spinning animation */ @keyframes wordspin { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } @-webkit-keyframes wordspin /*Safari and Chrome*/ { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } /* loader div */ #loader2 { width: 16em; height: 16em; margin: 6em auto 6em auto; font-size: 12px; background-color: white; border-left: 1.6em solid #3399FF; border-right: 1.6em solid #3399FF; border-top: 1.6em solid transparent; border-bottom: 1.6em solid transparent; border-radius: 100%; -webkit-border-radius: 100%; animation: loader 1s infinite; -webkit-animation: loader 1s infinite; } /* spinning animation */ @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes loader /*Safari and Chrome*/ { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .ownlink { color: #3399FF; text-decoration: none; font-style: italic; }
38
Loading Animation v2
By:
rald_dev
body{ background: #373940; } .socket{ width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } .hex-brick{ background: #ABF8FF; width: 30px; height: 17px; position: absolute; top: 5px; animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .h2{ transform: rotate(60deg); -webkit-transform: rotate(60deg); } .h3{ transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .gel{ height: 30px; width: 30px; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; left: 50%; } .center-gel{ margin-left: -15px; margin-top: -15px; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .c1{ margin-left: -47px; margin-top: -15px; } .c2{ margin-left: -31px; margin-top: -43px; } .c3{ margin-left: 1px; margin-top: -43px; } .c4{ margin-left: 17px; margin-top: -15px; } .c5{ margin-left: -31px; margin-top: 13px; } .c6{ margin-left: 1px; margin-top: 13px; } .c7{ margin-left: -63px; margin-top: -43px; } .c8{ margin-left: 33px; margin-top: -43px; } .c9{ margin-left: -15px; margin-top: 41px; } .c10{ margin-left: -63px; margin-top: 13px; } .c11{ margin-left: 33px; margin-top: 13px; } .c12{ margin-left: -15px; margin-top: -71px; } .c13{ margin-left: -47px; margin-top: -71px; } .c14{ margin-left: 17px; margin-top: -71px; } .c15{ margin-left: -47px; margin-top: 41px; } .c16{ margin-left: 17px; margin-top: 41px; } .c17{ margin-left: -79px; margin-top: -15px; } .c18{ margin-left: 49px; margin-top: -15px; } .c19{ margin-left: -63px; margin-top: -99px; } .c20{ margin-left: 33px; margin-top: -99px; } .c21{ margin-left: 1px; margin-top: -99px; } .c22{ margin-left: -31px; margin-top: -99px; } .c23{ margin-left: -63px; margin-top: 69px; } .c24{ margin-left: 33px; margin-top: 69px; } .c25{ margin-left: 1px; margin-top: 69px; } .c26{ margin-left: -31px; margin-top: 69px; } .c27{ margin-left: -79px; margin-top: -15px; } .c28{ margin-left: -95px; margin-top: -43px; } .c29{ margin-left: -95px; margin-top: 13px; } .c30{ margin-left: 49px; margin-top: 41px; } .c31{ margin-left: -79px; margin-top: -71px; } .c32{ margin-left: -111px; margin-top: -15px; } .c33{ margin-left: 65px; margin-top: -43px; } .c34{ margin-left: 65px; margin-top: 13px; } .c35{ margin-left: -79px; margin-top: 41px; } .c36{ margin-left: 49px; margin-top: -71px; } .c37{ margin-left: 81px; margin-top: -15px; } .r1{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3{ animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } .r1 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 > .hex-brick{ animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } @keyframes pulse{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0.01); transform: scale(0.01); } 100%{ -webkit-transform: scale(1); transform: scale(1); } } @keyframes fade{ 0%{ background: #ABF8FF; } 50%{ background: #90BBBF; } 100%{ background: #ABF8FF; } } @-webkit-keyframes pulse{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0.01); transform: scale(0.01); } 100%{ -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fade{ 0%{ background: #ABF8FF; } 50%{ background: #389CA6; } 100%{ background: #ABF8FF; } }
36
Hexagonal Loading Animation
By:
rald_dev
/* Inspirated from http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html */ .ouro { position: relative; display:inline-block; height: 46px; width: 46px; margin: 1em; border-radius: 50%; background: none repeat scroll 0 0 #DDDDDD; overflow:hidden; box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); } .ouro:after { content: ""; position: absolute; top: 9px; left: 9px; display: block; height: 28px; width: 28px; background: none repeat scroll 0 0 #F2F2F2; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.1); } .ouro > span { position: absolute; height: 100%; width: 50%; overflow: hidden; } .left { left:0 } .right { left:50% } .anim { position: absolute; left: 100%; top: 0; height: 100%; width: 100%; border-radius: 999px; background: none repeat scroll 0 0 #508EC3; opacity: 0.8; -webkit-animation: ui-spinner-rotate-left 3s infinite; animation: ui-spinner-rotate-left 3s infinite; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; } .left .anim { border-bottom-left-radius: 0; border-top-left-radius: 0; } .right .anim { border-bottom-right-radius: 0; border-top-right-radius: 0; left: -100%; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; } /* v2 */ .ouro2 .anim { -webkit-animation-delay:0; animation-delay:0; } .ouro2 .right .anim{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } /* v3 */ .ouro3 .anim { -webkit-animation-delay: 0s; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear; animation-delay: 0s; animation-duration:3s; animation-timing-function: linear; } .ouro3 .right .anim{ -webkit-animation-name: ui-spinner-rotate-right; -webkit-animation-delay:0; -webkit-animation-delay: 1.5s; animation-name: ui-spinner-rotate-right; animation-delay:0; animation-delay: 1.5s; } /* round variation */ .round .ouro:after {display:none } /* double variation */ .double .ouro:after { height: 13px; width: 13px; left: 7px; top: 7px; border: 10px solid #ddd; background: transparent; box-shadow: none; } @keyframes ui-spinner-rotate-right{ 0%{transform:rotate(0deg)} 25%{transform:rotate(180deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(360deg)} 100%{transform:rotate(360deg)} } @keyframes ui-spinner-rotate-left{ 0%{transform:rotate(0deg)} 25%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-right{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(180deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(360deg)} 100%{-webkit-transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-left{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(0deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)} } /* * Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code. */ /* presentation styles */ html {height: 100%} body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%} .block {display: table-cell; vertical-align:middle} h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;} .info {margin-top: 25px} .info a {font-size: 12px; color: #999} .info br + a {text-decoration:none}
36
Circle Loader v2
By:
rald_dev
.loadingspinner { --square: 26px; --offset: 30px; --duration: 2.4s; --delay: 0.2s; --timing-function: ease-in-out; --in-duration: 0.4s; --in-delay: 0.1s; --in-timing-function: ease-out; width: calc( 3 * var(--offset) + var(--square)); height: calc( 2 * var(--offset) + var(--square)); padding: 0px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 30px; position: relative; } .loadingspinner div { display: inline-block; background: darkorange; /*background: var(--text-color);*/ /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/ border: none; border-radius: 2px; width: var(--square); height: var(--square); position: absolute; padding: 0px; margin: 0px; font-size: 6pt; color: black; } .loadingspinner #square1 { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); animation: square1 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square2 { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square2 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square3 { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square3 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square4 { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square4 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both; } .loadingspinner #square5 { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); animation: square5 var(--duration) var(--delay) var(--timing-function) infinite, squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both; } @keyframes square1 { 0% { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); } 8.333% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square2 { 0% { left: calc( 0 * var(--offset) ); top: calc( 1 * var(--offset) ); } 8.333% { left: calc( 0 * var(--offset) ); top: calc( 2 * var(--offset) ); } 16.67% { left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); } 25.00% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 83.33% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 91.67% { left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); } 100% { left: calc( 0 * var(--offset) ); top: calc( 0 * var(--offset) ); } } @keyframes square3 { 0%,100% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 16.67% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } 25.00% { left: calc( 1 * var(--offset) ); top: calc( 0 * var(--offset) ); } 33.33% { left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); } 41.67% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 66.67% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 75.00% { left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); } 83.33% { left: calc( 1 * var(--offset) ); top: calc( 2 * var(--offset) ); } 91.67% { left: calc( 1 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square4 { 0% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 33.33% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 41.67% { left: calc( 2 * var(--offset) ); top: calc( 2 * var(--offset) ); } 50.00% { left: calc( 3 * var(--offset) ); top: calc( 2 * var(--offset) ); } 58.33% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes square5 { 0% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 50.00% { left: calc( 3 * var(--offset) ); top: calc( 1 * var(--offset) ); } 58.33% { left: calc( 3 * var(--offset) ); top: calc( 0 * var(--offset) ); } 66.67% { left: calc( 2 * var(--offset) ); top: calc( 0 * var(--offset) ); } 75.00% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } 100% { left: calc( 2 * var(--offset) ); top: calc( 1 * var(--offset) ); } } @keyframes squarefadein { 0% { transform: scale(0.75); opacity: 0.0; } 100% { transform: scale(1.0); opacity: 1.0; } }
36
Tetris Block Loader
By:
pixeldev
.loader { border: 8px; border-top: 4px dotted #FF0035; border-radius:50%; width: 120px; height: 120px; animation: spin 3s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 0% {background-color:#FF0035 ; opacity: 0.2;} 30% {background-color:white; opacity: 1.0;} 70% {background-color:white; opacity: 1.0;} 100% {background-color: #FF0035; opacity: 0.2;} } }
35
Red loading animation
By:
rald_dev
.loadingWrap { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 500px; height: 50px; text-align: center; } .loadingBoxes { display: inline-block; margin: 3px; width: 40px; height: 40px; border-radius: 10px; } .loadingBoxColour1 {background: #00A396; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.0s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour2 {background: #81C540; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour3 {background: #F5B52E; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour4 {background: #ED5B35; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour5 {background: #EA225E; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes loadingBoxColour { 0% { transform: scale(1.0); } 50% { transform: scale(0.5); } 100% { transform: scale(1.0); } }
34
Loading Animation
By:
rald_dev
* { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: center; align-items: center; background-color: #111; } /* Style One */ .one { width: 100px; transform-origin: center; animation: rotate 4s linear infinite; } .one circle { fill: none; stroke: red; stroke-width: 10; stroke-dasharray: 1, 20; } @keyframes rotate { 100% { transform: rotate(360deg); } } .lines { width: 100px; height: 100px; position: relative; } /* Style Two */ .l2 { display: flex; justify-content: space-around; align-items: center; } .l2 .line { height: 20px; width: 4px; background-color: #fff; animation: topBottom 800ms linear infinite; } .l2 .line:nth-child(1) { animation-delay: 0s; } .l2 .line:nth-child(2) { animation-delay: 0.2s; } .l2 .line:nth-child(3) { animation-delay: 0.4s; } .l2 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes topBottom { 0% { transform: translateY(0px); } 25% { transform: translateY(40px); } 75% { transform: translateY(-40px); } 100% { transform: translateY(0px); } } /* Style Three*/ .l3 { display: flex; justify-content: space-around; align-items: center; } .l3 .line { height: 0px; width: 4px; left: 0px; background-color: #fff; animation: expand 900ms ease infinite; } .l3 .line:nth-child(1) { animation-delay: 0s; } .l3 .line:nth-child(2) { animation-delay: 0.2s; } .l3 .line:nth-child(3) { animation-delay: 0.4s; } .l3 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expand { 0%, 100% { height: 0px; } 50% { height: 40px; } } /* Style Four*/ .l4 { display: flex; justify-content: space-around; align-items: center; } .l4 .line { height: 2px; width: 4px; background-color: #fff; transform-origin: bottom; animation: expandTop 900ms ease infinite; } .l4 .line:nth-child(1) { animation-delay: 0s; } .l4 .line:nth-child(2) { animation-delay: 0.2s; } .l4 .line:nth-child(3) { animation-delay: 0.4s; } .l4 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expandTop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(20); } } /* Style five*/ .l5 { display: flex; justify-content: space-around; align-items: center; } .l5 .line { height: 20px; width: 4px; background-color: orange; animation: blink 1s ease infinite; } .l5 .line:nth-child(1), .l5 .line:nth-child(10) { animation-delay: 0.8s; } .l5 .line:nth-child(2), .l5 .line:nth-child(9) { animation-delay: 0.6s; } .l5 .line:nth-child(3), .l5 .line:nth-child(8) { animation-delay: 0.4s; } .l5 .line:nth-child(4), .l5 .line:nth-child(7) { animation-delay: 0.2s; } .l5 .line:nth-child(6), .l5 .line:nth-child(5) { animation-delay: 0s; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Style Six*/ .l6 { display: flex; justify-content: space-around; align-items: center; overflow: hidden; position: relative; height: 20px; background-color: blue; } .l6 .line:nth-child(1) { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background-color: #fff; animation: expandRight 2s ease infinite; } .l6 .line:nth-child(2) { position: absolute; right: 0; top: 0; height: 10px; width: 100%; animation: expandLeft 2s ease infinite; background-color: #fff; } @keyframes expandRight { 0% { transform-origin: left; transform: translateX(0%); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes expandLeft { 0% { transform-origin: right; transform: translateX(100%); } 50% { transform: translateX(0%); transform-origin: left; } 100% { transform: translateX(100%); } } /* Style Seven */ .l7 { position: relative; width: 80px; height: 80px; animation: 900ms linear rotateMain infinite; } .l7 .line { position: absolute; background-color: #fff; } .l7 .line:nth-child(1) { left: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(2) { right: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(3) { left: 40px; animation: 600ms ease-in growHeight infinite; } .l7 .line:nth-child(4) { left: 40px; bottom: 0px; animation: 600ms ease-in growHeight infinite; } @keyframes growHeight { 0%, 100% { height: 0px; width: 2px; } 50% { height: 40px; width: 2px; } } @keyframes growWidth { 0%, 100% { width: 0px; height: 2px; } 50% { width: 40px; height: 2px; } } @keyframes rotateMain { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Style Eight*/ .l8 { display: flex; justify-content: space-around; align-items: center; } .l8 .line { height: 20px; width: 4px; background-color: rgb(255, 0, 76); animation: growLine 1s ease infinite; } .l8 .line:nth-child(1), .l8 .line:nth-child(10) { animation-delay: 0.8s; } .l8 .line:nth-child(2), .l8 .line:nth-child(9) { animation-delay: 0.6s; } .l8 .line:nth-child(3), .l8 .line:nth-child(8) { animation-delay: 0.4s; } .l8 .line:nth-child(4), .l8 .line:nth-child(7) { animation-delay: 0.2s; } .l8 .line:nth-child(6), .l8 .line:nth-child(5) { animation-delay: 0s; } @keyframes growLine { 0%, 100% { transform: scale(0); } 50% { transform: scale(1.5); } } .circle-loader { width: 80px; height: 80px; border: 8px solid #333; border-top: 8px solid red; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
34
8 Pre loader animation using css
By:
rald_dev
*{ padding: 0; margin: 0; font-family: 'Quicksand', sans-serif; } body{ background:#40739e; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 5px; overflow: hidden; } .container span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: inline-block; animation: animate 10s infinite linear; } @keyframes animate{ 0%{ transform: translateX(-100%); } 50%{ transform: translateX(100%); } 100%{ transform: translateX(-100%); } }
33
Line Loading Animation
By:
rald_dev
* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; } body { margin: 0; padding: 0; } .loader { width: 100%; height: 100%; background-color: #f0f0f0; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .loader-container { width: 120px; height: 120px; } .loader-block { width: 16px; height: 16px; background-color: #ff2d37; border-radius: 3px; margin-right: 10px; margin-bottom: 10px; position: relative; float: left; animation: wave 1.5s infinite; } .loader-block:nth-child(4n + 2) { animation-delay: 0.2s; } .loader-block:nth-child(4n + 3) { animation-delay: 0.4s; } .loader-block:nth-child(4n + 4) { animation-delay: 0.6s; } /* Create a wave animation */ @keyframes wave { 0% { top: 0; opacity: 1; } 50% { top: 30px; opacity: 0.2; } 100% { top: 0; opacity: 1; } }
33
Wavy Preloader Animation
By:
rald_dev
1
2
Next