{"id":77,"date":"2015-03-22T12:12:08","date_gmt":"2015-03-22T10:12:08","guid":{"rendered":"http:\/\/www.kopf.com.br\/kaplof\/?p=77"},"modified":"2015-04-13T09:47:23","modified_gmt":"2015-04-13T07:47:23","slug":"crazy-circles-loading-using-javascript","status":"publish","type":"post","link":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/","title":{"rendered":"Crazy Circles Loading using Javascript"},"content":{"rendered":"<p>Crazy circles is a nice visual illusion. &#8220;Loading&#8230;&#8221; windows tend to be boring. Combining both of them may keep your users entertained while waiting for data to load. Even best if it can be dynamically configured to fit your website \ud83d\ude42 .<\/p>\n<h4>Examples<\/h4>\n<p><iframe loading=\"lazy\" style=\"width: 800px; height: 120px; border: solid 1px;\" src=\"\/ccExamples.htm\" width=\"300\" height=\"150\"><\/iframe><\/p>\n<h2>Crazy Circles<\/h2>\n<p>Crazy Circles is a visual illusion which happens when different balls bouncing inside of a circle create the impression of a circular movement, where in reality, the movement of each ball is straight (not really&#8230; when implementing it, I found out that to give the correct illusion, each ball animation should be eased using a sinus function).<\/p>\n<h2>Implementation Highlights<\/h2>\n<p>For rendering the graphs I used <a title=\"Rapha\u00ebl js\" href=\"https:\/\/www.raphaeljs.com\" target=\"_blank\">Rapha\u00ebl<\/a> which simplifies the work with vector graphics. Its big advantage over the HTML 5 canvas is that it is compatible with many old browsers. The only thing for which it didn&#8217;t work was to animate independent elements at the same time. After a while the synchronization was lost, the reason why I had to do the animation myself.<\/p>\n<p>While doing the animation, I copied\/pasted the way Rapha\u00ebl was choosing the best animation callback. It is supposedly multi-browsers compatible:<\/p>\n<pre class=\"brush:javascript\">\/\/ animation prototype\r\nvar requestAnimFrame =\r\n  window.requestAnimationFrame ||\r\n  window.webkitRequestAnimationFrame ||\r\n  window.mozRequestAnimationFrame ||\r\n  window.oRequestAnimationFrame ||\r\n  window.msRequestAnimationFrame ||\r\n  function (callback) {\r\n    setTimeout(callback, 16);\r\n  };\r\n<\/pre>\n<p>For the circles animation itself, well this is just remembering all the old trigonometry which is somewhere rusted in your brain.\u00a0 To do the go crazy mode, I based myself on a nice article on collision:<br \/>\n<a href=\"https:\/\/gamedevelopment.tutsplus.com\/tutorials\/when-worlds-collide-simulating-circle-circle-collisions--gamedev-769\" target=\"_blank\"> When Worlds Collide: Simulating Circle-Circle Collisions<\/a>.<\/p>\n<p>Put it all together and you have a nice Loading&#8230; effect. The full source can be found on: <a title=\"Crazy Circles\" href=\"\/crazy.circles.js\" target=\"_blank\">crazy.circles.js<\/a>.<\/p>\n<p>Instructions on how to use it can be found on the dedicated page: <a title=\"Crazy Circles\" href=\"\/crazy.circles\">Crazy Circles<\/a>.<\/p>\n<h2>Playing around<\/h2>\n<p>On the example below, you may play around with all the possible configurations.<\/p>\n<p><iframe loading=\"lazy\" style=\"width: 100%; height: 600px; border: solid 1px;\" src=\"\/ccTest.htm\" width=\"300\" height=\"150\"><\/iframe><\/p>\n<p>Have fun<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Crazy circles is a nice visual illusion. &#8220;Loading&#8230;&#8221; windows tend to be boring. Combining both of them may keep your users entertained while waiting for data to load. Even best if it can be dynamically configured to fit your website \ud83d\ude42 . Examples Crazy Circles Crazy Circles is a visual illusion which happens when different [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[23,22,24],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crazy Circles Loading using Javascript - Kaplof<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crazy Circles Loading using Javascript - Kaplof\" \/>\n<meta property=\"og:description\" content=\"Crazy circles is a nice visual illusion. &#8220;Loading&#8230;&#8221; windows tend to be boring. Combining both of them may keep your users entertained while waiting for data to load. Even best if it can be dynamically configured to fit your website \ud83d\ude42 . Examples Crazy Circles Crazy Circles is a visual illusion which happens when different [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kaplof\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-22T10:12:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-13T07:47:23+00:00\" \/>\n<meta name=\"author\" content=\"Bruno Marotta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bruno Marotta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\"},\"author\":{\"name\":\"Bruno Marotta\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891\"},\"headline\":\"Crazy Circles Loading using Javascript\",\"datePublished\":\"2015-03-22T10:12:08+00:00\",\"dateModified\":\"2015-04-13T07:47:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\"},\"wordCount\":290,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\"},\"keywords\":[\"crazy circles\",\"javascript\",\"loading\"],\"articleSection\":[\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\",\"name\":\"Crazy Circles Loading using Javascript - Kaplof\",\"isPartOf\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#website\"},\"datePublished\":\"2015-03-22T10:12:08+00:00\",\"dateModified\":\"2015-04-13T07:47:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kopf.com.br\/kaplof\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crazy Circles Loading using Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#website\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/\",\"name\":\"Kaplof\",\"description\":\"Sharing problems and solutions for software development\",\"publisher\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kopf.com.br\/kaplof\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#organization\",\"name\":\"Kopf\",\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1\",\"width\":78,\"height\":76,\"caption\":\"Kopf\"},\"image\":{\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891\",\"name\":\"Bruno Marotta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g\",\"caption\":\"Bruno Marotta\"},\"url\":\"https:\/\/www.kopf.com.br\/kaplof\/author\/bmarotta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crazy Circles Loading using Javascript - Kaplof","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Crazy Circles Loading using Javascript - Kaplof","og_description":"Crazy circles is a nice visual illusion. &#8220;Loading&#8230;&#8221; windows tend to be boring. Combining both of them may keep your users entertained while waiting for data to load. Even best if it can be dynamically configured to fit your website \ud83d\ude42 . Examples Crazy Circles Crazy Circles is a visual illusion which happens when different [&hellip;]","og_url":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/","og_site_name":"Kaplof","article_published_time":"2015-03-22T10:12:08+00:00","article_modified_time":"2015-04-13T07:47:23+00:00","author":"Bruno Marotta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Bruno Marotta","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/"},"author":{"name":"Bruno Marotta","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891"},"headline":"Crazy Circles Loading using Javascript","datePublished":"2015-03-22T10:12:08+00:00","dateModified":"2015-04-13T07:47:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/"},"wordCount":290,"commentCount":0,"publisher":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization"},"keywords":["crazy circles","javascript","loading"],"articleSection":["javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/","url":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/","name":"Crazy Circles Loading using Javascript - Kaplof","isPartOf":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#website"},"datePublished":"2015-03-22T10:12:08+00:00","dateModified":"2015-04-13T07:47:23+00:00","breadcrumb":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kopf.com.br\/kaplof\/crazy-circles-loading-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kopf.com.br\/kaplof\/"},{"@type":"ListItem","position":2,"name":"Crazy Circles Loading using Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.kopf.com.br\/kaplof\/#website","url":"https:\/\/www.kopf.com.br\/kaplof\/","name":"Kaplof","description":"Sharing problems and solutions for software development","publisher":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kopf.com.br\/kaplof\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.kopf.com.br\/kaplof\/#organization","name":"Kopf","url":"https:\/\/www.kopf.com.br\/kaplof\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.kopf.com.br\/kaplof\/wp-content\/uploads\/2015\/04\/Logo-grande.png?fit=78%2C76&ssl=1","width":78,"height":76,"caption":"Kopf"},"image":{"@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/a096a6de30951e12938c6a800eeaa891","name":"Bruno Marotta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kopf.com.br\/kaplof\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e15f82b4b9672c32c601286a40eb46f?s=96&d=mm&r=g","caption":"Bruno Marotta"},"url":"https:\/\/www.kopf.com.br\/kaplof\/author\/bmarotta\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/77"}],"collection":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":10,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/posts\/77\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kopf.com.br\/kaplof\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}