{"id":8485,"date":"2011-02-10T06:17:35","date_gmt":"2011-02-10T13:17:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=8485"},"modified":"2012-08-20T13:08:29","modified_gmt":"2012-08-20T20:08:29","slug":"css3-loading-spinner","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css3-loading-spinner\/","title":{"rendered":"CSS3 Loading Spinner"},"content":{"rendered":"<p>I made <a href=\"https:\/\/css-tricks.com\/examples\/Loading\/\">a little CSS3 rotate-y loading graphic thing<\/a> just for kicks. Here&#8217;s an animated GIF of the glory as it appears in WebKit.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/02\/spinnnnnn.gif?resize=214%2C206\" alt=\"\" title=\"spinnnnnn\" width=\"214\" height=\"206\" class=\"alignnone size-full wp-image-8486\" data-recalc-dims=\"1\" \/><\/p>\n<p>Theories at work:<\/p>\n<ul>\n<li>Two <a href=\"https:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\">circles<\/a> on top of each other. One created by <a href=\"https:\/\/css-tricks.com\/video-screencasts\/94-intro-to-pseudo-elements\/\">a pseudo element<\/a>.<\/li>\n<li>Pseudo circle sits underneath with negative <a href=\"https:\/\/css-tricks.com\/video-screencasts\/40-how-z-index-works\/\">z-index<\/a>.<\/li>\n<li>Pseudo circle has <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-box-shadow\/\">inset box-shadow<\/a>.<\/li>\n<li>Regular circle has regular <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-box-shadow\/\">box-shadow<\/a>.<\/li>\n<li>&#8220;Loading&#8230;&#8221; is a strong tag with <a href=\"https:\/\/css-tricks.com\/the-css-overflow-property\/\">hidden overflow<\/a>.<\/li>\n<li>Width of strong tag is <a href=\"https:\/\/css-tricks.com\/snippets\/css\/keyframe-animation-syntax\/\">animated keyframe<\/a>, doing the reveal, infinitely.<\/li>\n<li>Text is vertically centered by having <code>line-height<\/code> equal to <code>height<\/code>.<\/li>\n<li>Spinner is a <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-triangle\/\">triangle<\/a> placed above the pseudo circle but below the regular circle with z-index.<\/li>\n<li>Triangle is rotated from it&#8217;s tip by changing it&#8217;s <code>-webkit-transform-origin<\/code><\/li>\n<li>Triangle is <a href=\"https:\/\/css-tricks.com\/snippets\/css\/webkit-keyframe-animation-syntax\/\">keyframe animated<\/a> to go from 0 to 360deg infinitely.<\/li>\n<\/ul>\n<p>Ideally, the triangle would be a pseudo element as well, but unfortunately it&#8217;s a <code>&lt;span&gt;<\/code>. Pseudo elements cannot be animated (yet). Firefox 4 can transition them, but Firefox 4 doesn&#8217;t do keyframe animations (yet). <\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/Loading\/\" class=\"button\">View Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A WebKit-only demo of a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely. <\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8485"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8485"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8485\/revisions"}],"predecessor-version":[{"id":17805,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8485\/revisions\/17805"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=8485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}