A Pen by Scott Galloway on CodePen.
Last active
December 10, 2018 14:57
-
-
Save webdevstar/fb0b3e3cb69e680ab22957c4942f525a to your computer and use it in GitHub Desktop.
CSS Animation: Circle loader with checkmark completed state
This file contains 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
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1> | |
<div class="circle-loader"> | |
<div class="checkmark draw"></div> | |
</div> | |
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p> |
This file contains 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
$('#toggle').click(function() { | |
$('.circle-loader').toggleClass('load-complete'); | |
$('.checkmark').toggle(); | |
}); |
This file contains 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
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains 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
// This is just styling for this demo | |
body { | |
padding: 5em; | |
text-align: center; | |
} | |
h1 { | |
margin-bottom: 1em; | |
} | |
// Define vars we'll be using | |
$brand-success: #5cb85c; | |
$loader-size: 7em; | |
$check-height: $loader-size/2; | |
$check-width: $check-height/2; | |
$check-left: ($loader-size/6 + $loader-size/12); | |
$check-thickness: 3px; | |
$check-color: $brand-success; | |
.circle-loader { | |
margin-bottom: $loader-size/2; | |
border: 1px solid rgba(0, 0, 0, 0.2); | |
border-left-color: $check-color; | |
animation: loader-spin 1.2s infinite linear; | |
position: relative; | |
display: inline-block; | |
vertical-align: top; | |
border-radius: 50%; | |
width: $loader-size; | |
height: $loader-size; | |
} | |
.load-complete { | |
-webkit-animation: none; | |
animation: none; | |
border-color: $check-color; | |
transition: border 500ms ease-out; | |
} | |
.checkmark { | |
display: none; | |
&.draw:after { | |
animation-duration: 800ms; | |
animation-timing-function: ease; | |
animation-name: checkmark; | |
transform: scaleX(-1) rotate(135deg); | |
} | |
&:after { | |
opacity: 1; | |
height: $check-height; | |
width: $check-width; | |
transform-origin: left top; | |
border-right: $check-thickness solid $check-color; | |
border-top: $check-thickness solid $check-color; | |
content: ''; | |
left: $check-left; | |
top: $check-height; | |
position: absolute; | |
} | |
} | |
@keyframes loader-spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes checkmark { | |
0% { | |
height: 0; | |
width: 0; | |
opacity: 1; | |
} | |
20% { | |
height: 0; | |
width: $check-width; | |
opacity: 1; | |
} | |
40% { | |
height: $check-height; | |
width: $check-width; | |
opacity: 1; | |
} | |
100% { | |
height: $check-height; | |
width: $check-width; | |
opacity: 1; | |
} | |
} |
This file contains 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
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment