Some Tinder pulsing effect you can use for a loading animation
A Pen by Bright Sparks on CodePen.
Created
June 18, 2016 14:41
-
-
Save bright-spark/9226280b6637ecc5ea2e0e4d3fcf00c4 to your computer and use it in GitHub Desktop.
Pulse effect with css3 (Tinder like)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="load"> | |
| <i class="fa fa-heartbeat fa-3x"></i> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* the loader */ | |
| .load { | |
| margin: 150px auto; | |
| width: 100px; | |
| height: 100px; | |
| /** height is required as absolute value **/ | |
| background-color: #F08080; | |
| border-radius: 100px; | |
| position:relative; | |
| animation: pulse 2000ms linear infinite; | |
| -webkit-animation: pulse 2000ms linear infinite; | |
| -moz-animation: pulse 2000ms linear infinite; | |
| } | |
| .load i{ | |
| position:absolute; | |
| top:28px; | |
| left:24%; | |
| color:white; | |
| text-shadow:-1px -1px #333; | |
| } | |
| .load:after, | |
| .load:before { | |
| display: inline-block; | |
| margin: auto; | |
| position: absolute; | |
| content: ""; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 100px; | |
| background-color: #CD5C5C; | |
| } | |
| .load:after { | |
| z-index: -100; | |
| -webkit-animation: outer-ripple 2000ms linear infinite; | |
| -moz-animation: outer-ripple 2000ms linear infinite; | |
| animation: outer-ripple 2000ms linear infinite; | |
| } | |
| .load:before { | |
| z-index: -200; | |
| -webkit-animation: inner-ripple 2000ms linear infinite; | |
| -moz-animation: inner-ripple 2000ms linear infinite; | |
| animation: inner-ripple 2000ms linear infinite; | |
| } | |
| /* outer ripple */ | |
| @keyframes pulse{ | |
| 0% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 10% { | |
| transform: scale(1.1); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 20% { | |
| transform: scale(0.9); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| } | |
| @-moz-keyframes pulse{ | |
| 0% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 10% { | |
| transform: scale(1.1); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 20% { | |
| transform: scale(0.9); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| } | |
| @-webkit-keyframes pulse{ | |
| 0% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 10% { | |
| transform: scale(1.1); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 20% { | |
| transform: scale(0.9); | |
| filter: alpha(opacity=1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.8); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| } | |
| @keyframes outer-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 80% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes outer-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 80% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes outer-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 80% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(3.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } | |
| /* inner ripple */ | |
| @keyframes inner-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 30% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(2.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes inner-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 30% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(2.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes inner-ripple { | |
| 0% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 30% { | |
| transform: scale(1); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(2.5); | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment