Skip to content

Instantly share code, notes, and snippets.

@esprehn

esprehn/caret.html

Created Mar 23, 2017
Embed
What would you like to do?
Blinking caret that sleeps the main thread for 500ms
<!DOCTYPE html>
<style>
#caret {
height: 16px;
width: 1px;
background: black;
will-change: opacity;
opacity: 1;
transition: opacity;
transition-duration: 500ms;
}
</style>
<div id="caret"></div>
<script>
var caret = document.getElementById("caret");
function blink() {
var opacity = caret.style.opacity;
caret.style.opacity = (opacity == "1") ? "0" : "1";
setTimeout(blink, 1000);
}
blink();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment