{"id":1434,"date":"2023-05-14T16:37:38","date_gmt":"2023-05-14T13:37:38","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1434"},"modified":"2023-05-14T16:38:03","modified_gmt":"2023-05-14T13:38:03","slug":"glitchy-loading-indicator","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/loader\/1434\/","title":{"rendered":"Glitchy Loading Indicator"},"content":{"rendered":"\n
\"Glitchy<\/figure>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

  <div class="word">LOADING...<\/div>\n  <div class="overlay"><\/div>\n \n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.min.js"><\/script>\n<script src="\/\/cdnjs.cloudflare.com\/ajax\/libs\/lettering.js\/0.6.1\/jquery.lettering.min.js"><\/script><\/pre><\/div>\n\n\n\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro:400);\n\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  background: radial-gradient(#222922, #000500);\n  font-family: 'Source Code Pro', monospace;\n  font-weight: 400;\n  overflow: hidden;\n  padding: 30px 0 0 30px;\n  text-align: center;\n}\n\n.word {\n  bottom: 0;\n  color: #fff;\n  font-size: 2.5em;\n  height: 2.5em;\n  left: 0;\n  line-height: 2.5em;\n  margin: auto;\n  right: 0;\n  position: absolute;\n  text-shadow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);\n  top: 0\n}\n\n.word span {\n  display: inline-block;\n  transform: translateX(100%) scale(0.9);\n  transition: transform 500ms;\n}\n\n.word .done {\n  color: #6f6;\n  transform: translateX(0) scale(1);\n}\n\n.overlay {\n  background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);\n  background-size: 1000px 2px;\n  bottom: 0;\n  content: '';\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}<\/pre><\/div>\n\n\n\n
function Ticker( elem ) {\n\telem.lettering();\n\tthis.done = false;\n\tthis.cycleCount = 5;\n\tthis.cycleCurrent = 0;\n\tthis.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\\\;\\':"<>?,.\/`~'.split('');\n\tthis.charsCount = this.chars.length;\n\tthis.letters = elem.find( 'span' );\n\tthis.letterCount = this.letters.length;\n\tthis.letterCurrent = 0;\n\n\tthis.letters.each( function() {\n\t\tvar $this = $( this );\n\t\t$this.attr( 'data-orig', $this.text() );\n\t\t$this.text( '-' );\n\t});\n}\n\nTicker.prototype.getChar = function() {\n\treturn this.chars[ Math.floor( Math.random() * this.charsCount ) ];\n};\n\nTicker.prototype.reset = function() {\n\tthis.done = false;\n\tthis.cycleCurrent = 0;\n\tthis.letterCurrent = 0;\n\tthis.letters.each( function() {\n\t\tvar $this = $( this );\n\t\t$this.text( $this.attr( 'data-orig' ) );\n\t\t$this.removeClass( 'done' );\n\t});\n\tthis.loop();\n};\n\nTicker.prototype.loop = function() {\n\tvar self = this;\n\n\tthis.letters.each( function( index, elem ) {\n\t\tvar $elem = $( elem );\n\t\tif( index >= self.letterCurrent ) {\n\t\t\tif( $elem.text() !== ' ' ) {\n\t\t\t\t$elem.text( self.getChar() );\n\t\t\t\t$elem.css( 'opacity', Math.random() );\n\t\t\t}\n\t\t}\n\t});\n\n\tif( this.cycleCurrent < this.cycleCount ) {\n\t\tthis.cycleCurrent++;\n\t} else if( this.letterCurrent < this.letterCount ) {\n\t\tvar currLetter = this.letters.eq( this.letterCurrent );\n\t\tthis.cycleCurrent = 0;\n\t\tcurrLetter.text( currLetter.attr( 'data-orig' ) ).css( 'opacity', 1 ).addClass( 'done' );\n\t\tthis.letterCurrent++;\n\t} else {\n\t\tthis.done = true;\n\t}\n\n\tif( !this.done ) {\n\t\trequestAnimationFrame( function() {\n\t\t\tself.loop();\n\t\t});\n\t} else {\n\t\tsetTimeout( function() {\n\t\t\tself.reset();\n\t\t}, 750 );\n\t}\n};\n\n$words = $( '.word' );\n\n$words.each( function() {\n\tvar $this = $( this ),\n\t\tticker = new Ticker( $this ).reset();\n\t$this.data( 'ticker', ticker  );\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[17],"class_list":["post-1434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-loader","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1434"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1434\/revisions"}],"predecessor-version":[{"id":1436,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1434\/revisions\/1436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1435"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}