{"id":17562,"date":"2017-06-01T12:14:38","date_gmt":"2017-06-01T02:14:38","guid":{"rendered":"https:\/\/codemyui.com\/?p=17562"},"modified":"2018-05-16T16:43:24","modified_gmt":"2018-05-16T06:43:24","slug":"barcode-scan-line-animation-pure-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/barcode-scan-line-animation-pure-css\/","title":{"rendered":"Barcode Scan Line Animation in Pure CSS"},"content":{"rendered":"<p>Here is a snippet that you can use to showcase a barcode and the scanning line animation in a web page, it was designed by <a href=\"https:\/\/twitter.com\/heyfusco\" target=\"_blank\" rel=\"noopener\">Joseph Fusco<\/a>. The scan line has a <a href=\"https:\/\/codemyui.com\/tag\/distortion-effect\/\">flicker effect<\/a> and scans from top to bottom. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/c63272c65515f8884ec15505fc0b423e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>can Line Animation Snippet<\/h2>\n<p class='codepen'  data-height='358' data-theme-id='0' data-slug-hash='RNJQQN' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Barcode Scanner \ud83d\ude42 by Joseph Fusco (@fusco) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here is a snippet that you can use to showcase a barcode and the scanning line animation in a web page, it was designed by Joseph Fusco. The scan line has a flicker effect and scans from top to bottom.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/barcode-scan-line-animation-pure-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":17565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1807,18697259,30305495],"class_list":["post-17562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-distortion-effect","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/barcode-scan-line-animation-in-pure-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":247,"url":"https:\/\/codemyui.com\/imessage-typing-indicator-in-css\/","url_meta":{"origin":17562,"position":0},"title":"iMessage Typing Indicator in CSS","author":"Hima Vincent","date":"June 18, 2015","format":false,"excerpt":"iMessage typing indicator in CSS. Designed by Joseph Fusco. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"icon\"","block_context":{"text":"icon","link":"https:\/\/codemyui.com\/tag\/icon\/"},"img":{"alt_text":"iMessage Typing Indicator in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/imessage-typing-indicator-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/imessage-typing-indicator-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/imessage-typing-indicator-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/imessage-typing-indicator-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30000,"url":"https:\/\/codemyui.com\/scan-text-loading-label\/","url_meta":{"origin":17562,"position":1},"title":"Scan Text Loading Label","author":"Saijo George","date":"July 19, 2020","format":false,"excerpt":"Code by: Eric Huguenin from Codepen If you are having trouble with the pen, try the archived copy on GitHub Loader Text Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Scan Text Loading Label","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":20369,"url":"https:\/\/codemyui.com\/fingerprint-scan-animation\/","url_meta":{"origin":17562,"position":2},"title":"Fingerprint Scan Animation","author":"Hima Vincent","date":"July 21, 2017","format":false,"excerpt":"This handy snippet from abeldebruijn lets you add a fingerprint scanning animation to your web pages. When you hover over the fingerprint scan area the lines in it animated to show the scanning effect. If you are having trouble with the pen, try the archived copy on GitHub Fingerprint Scan\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Fingerprint Scan Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/fingerprint-scan-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/fingerprint-scan-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/fingerprint-scan-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/fingerprint-scan-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25232,"url":"https:\/\/codemyui.com\/pure-css-3d-christmas-tree-animation\/","url_meta":{"origin":17562,"position":3},"title":"Pure CSS 3D Christmas Tree Animation","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"You can use this pure CSS snippet to add a fancy christmas tree animation to you webpage, it was designed by Ana Travas. If you are having trouble with the pen, try the archived copy on GitHub CSS Christmas Tree Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25034,"url":"https:\/\/codemyui.com\/pure-css-progress-card-animation\/","url_meta":{"origin":17562,"position":4},"title":"Pure CSS Progress Card With Animation","author":"Hima Vincent","date":"November 10, 2017","format":false,"excerpt":"With these CSS only snippet designed by Chris Smith you can show progress cards that animates the % of the progress on the card. Will look great on card ui inspired websites. If you are having trouble with the pen, try the archived copy on GitHub Progress Card Animation Snippet","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Pure CSS Progress Card With Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-progress-card.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-progress-card.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-progress-card.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-progress-card.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26810,"url":"https:\/\/codemyui.com\/pure-css-text-shake-animation\/","url_meta":{"origin":17562,"position":5},"title":"Pure CSS Text Shake Animation","author":"Saijo George","date":"August 27, 2018","format":false,"excerpt":"In this text effect snippet by Dronca Raul you have a gradient text color for the text and it has a shake effect simiar to a glitch, the effects are created in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub CSS Text\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"A smooth sea never made a skilled sailor.","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Pure-CSS-Text-Shake-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Pure-CSS-Text-Shake-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Pure-CSS-Text-Shake-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Pure-CSS-Text-Shake-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=17562"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17562\/revisions"}],"predecessor-version":[{"id":25796,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17562\/revisions\/25796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/17565"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=17562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=17562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=17562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}