Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="line" id="line"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, asperiores et. Corrupti, asperiores sapiente. Laboriosam repellendus tempora similique consectetur doloribus temporibus possimus saepe minima ut sed officiis molestiae ad officia voluptatibus, quae dolorum nisi atque at eveniet quia corporis magni totam quibusdam a! Possimus, ullam repudiandae. Voluptas, omnis exercitationem? Ipsa distinctio, reprehenderit quod fugit sit ut dolore ducimus beatae voluptas molestias. Ratione accusantium explicabo molestias! Nesciunt aliquam dicta perferendis quod, voluptates omnis saepe labore distinctio mollitia vero adipisci, quibusdam voluptas impedit dolorem ut sit. Voluptate voluptatibus aperiam quo dolores a officia totam dolorem esse quaerat saepe iusto quis aliquid autem enim quas consequuntur laboriosam asperiores, recusandae placeat facilis amet, incidunt delectus vero sit. Maiores aliquid quia hic vero dolores saepe provident impedit magni nobis accusamus dicta veritatis architecto modi nisi atque, commodi, deleniti porro ratione, odio molestiae? Ab voluptatibus molestiae dolor dignissimos! Non facere dolorem at ducimus doloremque ipsa nemo velit nam accusamus unde, consequuntur earum nostrum nihil obcaecati enim rerum quod inventore distinctio? Perferendis quisquam accusantium ut tempore quas sint rem sed ab omnis totam odit voluptate odio unde, ducimus corrupti, laborum magnam sit soluta fuga laboriosam repudiandae. Laborum molestias nihil, aut, repudiandae modi maiores beatae itaque cumque accusamus libero inventore cupiditate aliquid doloribus suscipit quas quibusdam dolor, obcaecati iste id tempore nam sint. Cupiditate magnam quis consequatur illum aliquam odio, at repudiandae atque, eos ipsum voluptatibus ut, pariatur ducimus accusantium possimus deserunt illo facilis eligendi officia vel culpa? Mollitia at, ratione rem optio odit ea earum repellendus porro dicta commodi obcaecati architecto! Iure facilis maxime odit, optio assumenda suscipit non minima numquam perferendis, ipsum sequi, neque natus quis corrupti autem laborum quas earum debitis. Soluta officia eum dignissimos praesentium quas assumenda quos voluptate, dolorem eius ab molestiae eveniet, sequi sunt similique vel! Similique nam, dolor commodi itaque tempora neque iure voluptatum rem, maiores tempore sit nisi officiis dolores laborum nemo quos aut. Cum ullam velit illum quae nam distinctio assumenda atque, alias quaerat animi laborum iste. Maxime, nulla harum. Exercitationem pariatur labore blanditiis hic, eius soluta dolores assumenda atque earum, mollitia illum vel libero perferendis nulla sunt rerum illo minima, quod officiis tempora suscipit dicta error! Nesciunt labore reiciendis nisi consequatur dolore. Sed magnam illo rem quae aliquid expedita nesciunt molestias ut, itaque temporibus cupiditate, minus eum soluta animi ex dolorem? Illo obcaecati, doloremque sint quia fugiat, molestiae eveniet repudiandae assumenda molestias esse voluptatem rerum provident voluptates laboriosam consequuntur, quibusdam fugit tenetur reprehenderit nemo! Quod deserunt possimus labore laboriosam soluta aspernatur fuga reprehenderit veritatis eius neque doloribus repellat id necessitatibus sed, officia consequuntur dolorum consectetur voluptates illo perferendis quia numquam. Sequi, impedit accusamus quia similique quibusdam quidem eum velit dicta beatae non assumenda ducimus iste, nemo in inventore, tempora amet molestias porro quasi! Quis odit consequatur eum quod magnam dignissimos? Tempora numquam soluta veritatis dolorem totam asperiores similique aut laudantium. Ratione laboriosam velit incidunt aut repellendus tempora at modi alias. Perferendis obcaecati est labore nulla facere! Voluptatum tempore animi, reiciendis unde temporibus beatae fuga iusto quisquam tenetur rerum?</p>


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sunt dignissimos qui atque rerum, nostrum animi iusto officia beatae distinctio. Officia cum temporibus, totam soluta sed nam id! Qui minima a dolores ut saepe nulla adipisci, quia magni dolor modi. Accusantium quaerat distinctio id dolorum omnis possimus dolores iusto in, natus dignissimos doloremque commodi nostrum quos, accusamus soluta ratione inventore veniam temporibus! Similique cupiditate quaerat quibusdam dolorum deserunt dolor possimus nihil blanditiis delectus ducimus doloremque magni, omnis esse quasi praesentium impedit? Labore assumenda accusantium, mollitia animi delectus tempore odio repellat illo officia cum fuga asperiores nisi nobis fugiat consequatur quo expedita dolorem. Odit ullam, repudiandae voluptatem quam voluptates aliquam ratione possimus libero tenetur labore, quos dignissimos, pariatur facilis in explicabo. Repellendus nisi odio dolorum nemo corporis deleniti beatae quis nesciunt ratione sequi sapiente provident, nostrum repellat reiciendis excepturi magni fuga explicabo iusto impedit, suscipit rerum laudantium? Culpa sint nihil maiores reprehenderit, commodi dolorem repellat nisi id architecto corrupti modi sunt vel veniam, laudantium incidunt, dolore unde numquam recusandae eius excepturi quos iusto accusantium itaque? Aut, quaerat nesciunt officia inventore repellendus culpa amet sapiente explicabo quo a est nihil illum perferendis exercitationem suscipit recusandae odit voluptates nostrum nulla sint minima quis ipsa iusto? Soluta nemo facere minus ex, voluptates doloremque iste reprehenderit quo optio cum error, nulla aperiam, nam magni fuga commodi assumenda laborum necessitatibus quam minima. Autem, numquam tenetur. Non molestias a adipisci doloremque fugit reiciendis ex libero natus similique sint. Id blanditiis placeat nostrum quidem. Nihil voluptatem similique aperiam ullam sed, esse tenetur beatae incidunt illum! Exercitationem debitis recusandae temporibus nemo reprehenderit officiis tempora distinctio! Expedita cupiditate, reprehenderit tenetur quo ex quae magni facilis vel pariatur nulla fugit sequi dignissimos. Dolor aliquam ratione itaque voluptatum tempore neque velit quisquam omnis ab enim, voluptas laboriosam perspiciatis hic, excepturi quibusdam temporibus sint laudantium labore magnam maiores molestiae quod corporis dolore architecto! Pariatur, eum. Ea, voluptatem id quia autem odio maiores sapiente quibusdam quae tenetur. Ipsa, qui. Sed facere consectetur quos dicta eos! Eveniet, nesciunt voluptas consequuntur praesentium omnis, exercitationem eos animi in soluta sunt hic illo numquam cupiditate iure. Sit, a exercitationem? Fugiat optio alias doloribus. Necessitatibus quam dignissimos magnam, ut quisquam, in nemo quo nisi illo repudiandae consectetur dolorum, at modi. Mollitia dolorem distinctio quidem pariatur impedit minima molestias obcaecati? Rerum aut nemo corporis error impedit! Ab cum rem perferendis sapiente explicabo, quibusdam quisquam dicta maxime officiis voluptatum itaque alias doloribus deserunt amet impedit neque. Minima qui facere quas omnis sed maxime velit soluta? Inventore rerum iure, nostrum voluptatum ab unde repudiandae enim totam sed at, dicta sint minima odio vel itaque ipsum et commodi voluptate. Minus quae ipsum aspernatur neque ab enim aut quos repellendus animi et. Inventore, fuga iste accusamus maxime doloribus, animi, nam quos autem illum ratione eum fugit magni sit quas dignissimos molestias sunt quasi repudiandae minus suscipit. Corrupti sunt voluptatibus obcaecati assumenda! Obcaecati in provident velit, nam exercitationem, minima reprehenderit, tenetur iure delectus quos dignissimos! Esse, modi ipsam iusto voluptas vitae neque asperiores, at fuga fugit veniam suscipit repellendus obcaecati sint doloribus, adipisci recusandae quod laudantium ea quam? Ea provident inventore accusamus nesciunt quasi laborum doloribus quas, debitis quibusdam quidem similique, ducimus cum est iure? Ea atque vero cumque consequuntur! Incidunt culpa ipsum numquam explicabo quaerat quod doloribus quis qui aliquam, odit asperiores ipsam nobis rerum fugit praesentium, est ratione minima delectus veniam error possimus id saepe magnam quo? Vero architecto illum id labore odit minus quae sint dignissimos optio delectus facere, esse sapiente ipsum eaque at cumque, possimus eveniet dolores dolorum quam velit aspernatur eius blanditiis? Non ea animi debitis temporibus fugit provident perferendis laudantium, similique aliquid atque nam at nemo alias quasi dicta ipsam? Ullam ut beatae accusantium quidem incidunt, fuga eveniet nostrum quia earum in officia dignissimos possimus inventore quaerat vero sit. Accusantium voluptatibus et dolorum eaque expedita dolores ipsa consequuntur neque beatae enim, molestias perspiciatis est dolorem hic impedit minima eum esse, commodi tempora placeat magnam porro facilis iste. Quod magni veniam quos nihil repellendus magnam cupiditate, quaerat qui molestias distinctio suscipit nostrum placeat corporis tempore maxime voluptatum, odit, id error illo esse dolorem aperiam eos. Adipisci fugiat cupiditate repellat nulla dolore saepe sit mollitia. Quidem id dolorum commodi autem necessitatibus! Beatae non minima, commodi adipisci deleniti est inventore, laboriosam obcaecati sequi facilis necessitatibus dolore? Dolorum tempore quis rem tempora laboriosam error suscipit fuga veritatis. Vero error molestiae, eveniet modi aliquid illum odit possimus molestias perspiciatis inventore repellendus! Minima, nobis recusandae, sed deserunt voluptas id unde laudantium libero asperiores itaque doloremque quaerat sit, voluptate tempore ipsa aperiam quibusdam ullam ducimus provident placeat neque perspiciatis quam voluptatibus! Incidunt cumque id dignissimos delectus minima recusandae sit natus itaque. Id sunt laudantium itaque officia accusantium delectus fugit aperiam soluta, quod exercitationem inventore, omnis mollitia minima assumenda, temporibus est quo. Reiciendis minus earum reprehenderit sapiente maxime quas exercitationem quidem placeat dignissimos vero animi id illum sunt deserunt libero, consequatur quam ad nulla, tenetur doloribus asperiores quo incidunt. Impedit at ab, maiores maxime ad libero ducimus eum voluptatum, vero quia, delectus obcaecati asperiores eligendi aliquam? Numquam impedit, placeat alias nihil fugiat quasi aspernatur odio commodi maiores tempora, quod nam possimus porro reprehenderit natus facere adipisci et voluptatem minima repellat praesentium neque. Doloribus dolore quia omnis officiis placeat animi quo ducimus, aspernatur saepe commodi autem reiciendis nostrum temporibus nobis aut adipisci obcaecati? Inventore nobis fugit tenetur ipsum placeat quasi dolores aliquid explicabo dicta odit. Nobis iste odio sed porro illo quod facilis asperiores mollitia impedit voluptatum odit, accusamus reprehenderit. Non tenetur maiores, deserunt optio sint obcaecati, aspernatur eos necessitatibus quasi maxime dolore minus repellendus suscipit exercitationem iste nemo molestias! Ab, distinctio perferendis? Assumenda aut architecto aspernatur voluptates rerum, dicta modi, corrupti sed numquam quasi officiis cum voluptatum. Culpa maxime deleniti reprehenderit aliquam quod aliquid, adipisci itaque doloremque illum labore distinctio quia et quasi id voluptatem accusamus optio provident eligendi architecto quos fugiat officiis blanditiis repudiandae consectetur? Voluptatum id earum, quas velit soluta nam obcaecati odit veniam. Aspernatur ut ea dolore laudantium soluta molestiae molestias fugiat perferendis impedit.</p>


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit molestiae officiis explicabo dolore cumque ex illo quas, voluptatem adipisci asperiores reiciendis iste ipsa magnam assumenda qui nisi, vel consequatur quia officia quae expedita quaerat velit quidem aperiam. Beatae veniam nemo rem odit sit praesentium, vero, nihil ea fuga inventore incidunt soluta? Odio nostrum, mollitia qui enim eius dolorem cum pariatur voluptas adipisci assumenda veniam ullam quae corporis ipsum tenetur, nulla officia quisquam quidem iusto, harum nobis provident consequatur voluptate! Nobis eligendi harum dignissimos ab id odit laudantium magnam unde pariatur, itaque perferendis, suscipit sapiente cumque illum. Veritatis ex soluta quidem voluptatem ducimus saepe magnam odio atque minima explicabo dignissimos volus? Reprehenderit sint at exercitationem est! Quasi eligendi eum aliquam, quas laudantium dolorum temporibus officiis saepe totam commodi, incidunt veritatis mollitia odio autem nam iste aut exercitationem praesentium perferendis voluptate voluptas. Sequi, nisi velit dolorem reiciendis praesentium et eos aperiam consequatur dignissimos modi quidem corrupti repellat eius amet qui odit culpa maiores asperiores, iusto sint, minima dolores! At aliquam pariatur eligendi sed molestiae blanditiis, voluptatibus delectus quos corporis, repellendus eius sunt corrupti tempora voluptatum quidem, cupiditate aspernatur harum ducimus cum vel repellat! Iste molestias dignissimos error fugit harum saepe perspiciatis odit ducimus laboriosam totam, asperiores illo, quas perferendis atque provident voluptatem cum quo soluta, fugiat inventore? Commodi necessitatibus perferendis eligendi dignissimos hic at quaerat eveniet obcaecati doloremque, ipsa a natus animi non velit, fugiat deleniti modi quo voluptatem aspernatur distinctio eum debitis saepe est quidem? Eos officiis itaque ullam enim est non dolor necessitatibus odio, quae obcaecati cupiditate velit illo quasi dolorem nostrum, hic optio sunt debitis ab impedit. Rem repellendus laudantium explicabo fugiat provident commodi autem fuga quisquam, quibusdam corrupti laboriosam molestias neque enim ea officia nihil dolor porro odio! Dolorum, quas beatae dolor odio eum incidunt quaerat ab. Asperiores rerum accusantium id deleniti. Quia esse nostrum numquam ipsam, quod pariatur necessitatibus. Beatae quo, fuga voluptate culpa provident dolor minima totam quod, ullam architecto impedit corporis optio a quidem, ratione placeat! Nobis dolores voluptate placeat minima quasi magni quam accusamus amet provident a delectus recusandae consectetur enim quisquam tempora rerum, velit voluptatum nemo nisi laboriosam saepe fugit. Facere ea illum cumque aliquid explicabo nobis corporis dolore expedita! Repellendus blanditiis odit iste soluta, aperiam nisi deleniti veniam? Velit harum error inventore, doloremque officia, fugit maiores incidunt porro quisquam, quae quidem exercitationem! Est architecto iure optio soluta maxime deleniti at, tempore temporibus? Laudantium blanditiis ducimus saepe delectus officia nulla pariatur, autem nesciunt, eum natus, quis voluptatum harum hic. Vitae delectus totam eveniet et, expedita nemo debitis recusandae velit sunt! Atque ex debitis autem nesciunt nemo accusantium? Obcaecati facere voluptatum laboriosam beatae nesciunt ea neque, quasi dolore vero error deleniti, esse molestiae qui unde. Nobis quam aspernatur at fugiat nam saepe ratione in illo, temporibus incidunt? A, corrupti deserunt id ut enim labore deleniti provident, possimus culpa quia, illum hic ullam ea incidunt. Adipisci soluta optio, id vitae sequi sapiente autem voluptas, aliquam nulla culpa voluptatem assumenda modi rem officia dolorem voluptatibus eligendi possimus quas ducimus cum. Enim accusantium, necessitatibus fugit quae ipsa maiores! Dolorem vel molestias aliquid, officiis obcaecati deserunt nobis saepe illum provident vero harum! Ad, voluptates dignissimos aut, aspernatur quo officia ipsam sunt eum labore voluptatum neque tempore hic reiciendis? Maiores minus nulla cum commodi ipsa, amet aliquam iusto excepturi alias! Odio vel animi recusandae! Aliquam cupiditate, deleniti officia incidunt iste itaque repellendus quia reiciendis dolorum accusamus tempore qui repellat veniam delectus quod explicabo alias quaerat voluptatibus ab! Ipsa et numquam, reiciendis itaque hic, magnam nostrum facilis fuga dolorum unde eos recusandae aperiam harum pariatur minima fugit nesciunt eligendi eveniet corporis dolor, quo nihil? Ut perferendis quae quos autem molestias eius maxime laudantium explicabo cumque, reprehenderit ipsum debitis fugit voluptatem architecto accusamus quia odit. Cupiditate sit placeat voluptatem saepe esse laborum rem, ad quod nihil? Quas deserunt molestiae quam totam dolorum quisquam? At tenetur, porro, quasi vero ea libero delectus neque vitae, repudiandae cum nisi? Pariatur totam quisquam quas velit provident possimus excepturi reiciendis explicabo consequatur eveniet ipsam voluptate eum officiis itaque nihil voluptatum, harum illum mollitia deserunt dicta earum! Fugiat eum aliquam vero, quidem quas deleniti dicta recusandae obcaecati, rem animi facere facilis voluptatem et quam doloribus aliquid incidunt! Nihil, perferendis harum ullam ut nulla temporibus facere cum velit quae quis dolor quibusdam natus blanditiis labore iste adipisci omnis necessitatibus nam voluptatibus est. Nam ex nesciunt nobis quod corporis blanditiis illum fugiat quas autem voluptatibus perspiciatis illo assumenda eos numquam placeat, laudantium soluta laboriosam necessitatibus maiores? Repellat id tempore, ut recusandae itaque at beatae esse veritatis ducimus, facilis minima nostrum asperiores velit optio quos nam unde! Ratione autem sint aliquam laboriosam excepturi voluptate fugit molestiae laborum neque, a quisquam sapiente veniam quasi. Magni rem commodi voluptas velit alias esse, reprehenderit, eveniet expedita unde dicta, placeat architecto. Rem aspernatur sint non eum accusamus repellat cupiditate debitis? Odit soluta consequatur quia quo mollitia repellat corporis eveniet dolores totam vero aliquid minus velit obcaecati, ratione quisquam ad optio molestiae recusandae fugiat aspernatur! Facilis, ab quaerat? Similique tempore velit dolore facilis rem enim sequi, quasi voluptatem, ad numquam, consectetur aliquid nulla. Repellat consequuntur, quia atque debitis voluptates porro, earum praesentium facere dolorem illo accusantium! Suscipit illum natus, voluptates error sit accusamus, nulla rerum nisi non sequi magni provident doloribus totam esse neque est aut quam necessitatibus facere illo? Modi adipisci, enim, veniam fugiat explicabo necessitatibus nemo deleniti perspiciatis, nostrum ipsa incidunt minus libero rem fuga recusandae. Excepturi, iure! Eaque repellendus maxime non eius fugit cum eum. Excepturi nobis id voluptatibus deserunt nulla sit consectetur omnis ipsam totam suscipit amet architecto officia quibusdam, ea voluptatem harum sunt in mollitia laboriosam molestias quam aliquam atque aliquid fugit? Omnis incidunt culpa iusto accusamus? Nisi excepturi deserunt atque odit sint molestiae esse quidem. Quia molestias officia enim iure nam. Quaerat consequatur ducimus, impedit laborum est perspiciatis. Corrupti veniam, modi laudantium, officia cumque reiciendis eaque dicta tempora autem eligendi beatae blanditiis dolorem inventore non? Atque ut qui perspiciatis error suscipit, facere alias ea dolore. Molestias dolorum voluptate distinctio reiciendis nulla rem magni deserunt nobis quod excepturi, eligendi incidunt odio illo totam odit, voluptates pariatur cumque ipsam sunt. Molestias, ipsum dolores consectetur similique, saepe mollitia hic asperiores quod est quas tempora alias, nostrum qui obcaecati eveniet id ratione in. Dolorem nam vel, quidem corrupti quibusdam nostrum veritatis aliquam consequuntur voluptates quod! Ratione sit aliquid, laboriosam est nulla iste optio eaque repellendus quod harum commodi ex modi voluptates beatae placeat blanditiis, impedit sint. Nisi esse, asperiores, animi eos sit pariatur magnam dolor distinctio, nesciunt neque et? Quidem blanditiis ipsam eligendi nesciunt, praesentium laboriosam repellat facere impedit! Iure porro commodi iusto tempora pariatur natus neque excepturi aspernatur corrupti dolorum vitae, recusandae assumenda dignissimos sapiente odit, voluptate nisi dolores repellendus omnis voluptates illum, cum perferendis deserunt. Quaerat magni quasi aperiam. Repellendus numquam at soluta est modi molestiae beatae quae, totam aliquid ipsum dignissimos, sunt animi tempore sapiente eaque delectus dicta omnis ducimus, accusamus error nesciunt hic. Tenetur cumque in aperiam accusantium et tempore magnam unde quam provident ipsum laborum temporibus maiores, error fuga atque. Sint, nihil aliquam eveniet dolores commodi deserunt ducimus quaerat voluptate fugit ex placeat facere nam pariatur unde, necessitatibus, obcaecati sit aperiam aspernatur minima cupiditate maiores. Optio, eum excepturi. Excepturi quam perferendis odio laboriosam quidem autem ad rerum ab, aspernatur iure magni sequi similique, mollitia natus quod id. Tempore totam quos iste magni magnam! Sed unde quisquam impedit dolorum quaerat consequuntur soluta modi et. Odio ad fuga quisquam aliquam temporibus voluptates, odit nihil quod. Ipsam et architecto distinctio necessitatibus earum est maiores, pariatur atque facere quas nostrum perspiciatis aspernatur modi numquam laudantium ducimus. Quidem numquam ex ut. Commodi consectetur incidunt ipsa facere, qui fugit. Ipsam dolores nostrum, natus aspernatur tempora odit tempore, dolorum, ullam minus itaque sequi animi. Quo delectus harum possimus a iure, laboriosam fugit odio deleniti corrupti, labore perspiciatis ipsum laborum quas est repellat eum. Obcaecati impedit mollitia ab similique! Id placeat, earum tempora odit aperiam repudiandae illum ad numquam quas veritatis voluptate! Exercitationem a perspiciatis autem explicabo laborum, similique id fugit nulla, eligendi earum reiciendis architecto repudiandae? Doloremque dicta exercitationem sunt, dolorem et quidem ut, a odio corrupti sed quae repellendus harum natus beatae vitae repellat excepturi aliquid! Hic illo quod a id ducimus provident facilis debitis obcaecati nam eius? Culpa, ducimus? Veritatis iste sit voluptatem quis aspernatur quidem aliquam! Amet deleniti labore veritatis impedit quae commodi cupiditate quasi, ducimus, ipsa culpa fugiat repellendus qui sapiente obcaecati saepe! Cum provident dolore dignissimos consectetur commodi blanditiis ducimus voluptas aperiam ex, consequatur temporibus dolores est, distinctio voluptatem error minima aliquid dolorum molestiae eligendi perferendis pariatur repudiandae quod repellendus et. Explicabo asperiores recusandae sunt quasi, cum laboriosam deserunt dolor doloremque odio perferendis nulla in, voluptatem fugit ratione placeat hic corrupti id dolores? Similique quidem dicta provident? Assumenda, libero, ratione, neque asperiores numquam tempora rem nemo ipsum corporis iusto cumque id? Exercitationem, impedit consequuntur tempore veritatis quaerat id enim voluptatum facilis voluptates nulla? Dignissimos laudantium illum cumque magnam voluptatum. A nisi animi consequuntur delectus, quae optio et velit sed illo eos dignissimos deserunt ipsum debitis, hic obcaecati vitae similique vero ex id eveniet. Officia voluptatum provident nam veniam nobis. Saepe consequatur eum error maxime nobis quo quos, distinctio debitis ab culpa reiciendis optio adipisci nulla autem? Minima, corporis animi! Maiores architecto, recusandae vitae corrupti minima ipsa ut provident minus, iusto amet temporibus nulla, asperiores dolor magni saepe quos. Voluptas, architecto tenetur repellendus quidem tempora reprehenderit, officiis illo dignissimos eos, qui doloremque consequatur. Unde eaque nisi vitae totam provident repudiandae. Totam, neque. Error sequi aperiam ipsa placeat officia veritatis non aut accusamus consequatur et ipsam, id ratione, provident veniam eligendi eum esse neque quod ex, magnam odio commodi distinctio. Molestias nostrum hic, alias temporibus nemo tenetur debitis explicabo facere dolores atque quis, praesentium nulla. Dicta reiciendis repellat error commodi eos, ipsum perspiciatis laboriosam ea qui sapiente, assumenda alias quod iure adipisci aliquid expedita consectetur. Dolore quod architecto aperiam, possimus necessitatibus corporis excepturi aliquid. Sapiente porro vel ea iste quos minima, dolor minus pariatur expedita, esse in accusantium dolorum magnam ex velit at ad non ipsam? Ut velit sed ipsa, culpa necessitatibus numquam voluptatem quae, cum fugit officia sint delectus distinctio accusamus eligendi nemo quidem inventore? Eos doloremque architecto tempora autem incidunt quaerat placeat voluptate dolor eius suscipit enim vero, error voluptates velit voluptas illo fuga saepe ipsam aspernatur. Non dolorem veniam aperiam modi adipisci reprehenderit voluptas nisi deleniti saepe, quisquam, ut vitae. Consequuntur, quaerat. Officiis atque maxime, consequuntur doloremque aliquam distinctio aliquid fugit eveniet nulla eos rem enim provident repudiandae in error dolorem labore impedit eaque numquam quaerat ducimus aspernatur possimus. Obcaecati corporis nam maxime aperiam blanditiis, voluptatum quis impedit, culpa ipsam similique earum quasi velit consectetur laborum minima consequatur repellat quaerat omnis architecto, vero adipisci labore rem alias! Eveniet, impedit reprehenderit. Architecto assumenda nemo ducimus labore quas, natus nihil fugit. Quo quibusdam necessitatibus magni impedit architecto quaerat nulla cupiditate est. Molestiae nulla asperiores, in illum incidunt provident perferendis? Ea alias exercitationem numquam, mollitia nulla unde temporibus qui laborum soluta eveniet. Debitis sapiente aliquid expedita sunt ipsa delectus porro quaerat quia aspernatur maiores eum fuga corporis impedit facilis saepe ducimus odio voluptatem alias, nemo eligendi atque veniam dolore vel natus. Impedit ex itaque maiores fuga possimus ad voluptatibus ut reiciendis, expedita accusantium ipsum, accusamus voluptatum aliquid quibusdam tempore sed quasi consectetur, necessitatibus odit saepe? Dolor voluptate, dicta optio at pariatur explicabo, aut iure vero quae et modi rerum, nostrum beatae hic eveniet laborum? Quos dolores minus deleniti hic nam enim perferendis fuga deserunt culpa, nobis placeat beatae? Mollitia reprehenderit cum natus dicta. Dolores laudantium deserunt, culpa omnis quisquam cupiditate totam tempore reiciendis quia, modi doloribus consectetur architecto provident unde optio dolorum cumque cum error? Eligendi doloribus necessitatibus omnis error quas suscipit quibusdam aperiam veritatis? Necessitatibus facere similique, mollitia neque architecto officiis iusto aut labore assumenda magni pariatur quam rem maxime expedita ex asperiores a alias vitae? Quae, possimus. Repudiandae quo ipsam eligendi magni incidunt corporis. Impedit repellendus quod explicabo ipsa libero incidunt doloremque, non illo fugiat exercitationem animi dolor culpa aut optio dignissimos molestias maxime perspiciatis quam rerum tempore. Quis sunt cumque doloremque minus atque. Eos quo pariatur consequatur dolore, laboriosam mollitia quae quis adipisci sint corrupti similique necessitatibus incidunt provident ullam distinctio in nobis debitis optio odit asperiores dolor harum quos numquam tenetur. Eius laborum molestias debitis, vero, eum quis labore rerum sequi neque et unde provident qui repellat dolorem omnis ipsam id earum. Vel, quae odit! Similique at consequatur iure aspernatur, ut quidem, voluptatum delectus veniam molestias temporibus doloribus explicabo eveniet quia est nam doloremque soluta esse distinctio, tempora enim dolorum ducimus fugit. Ipsa officiis laboriosam aperiam eos repudiandae non ex! Deserunt praesentium ex eius laudantium dignissimos laboriosam repudiandae! Nisi cumque temporibus tempora voluptatibus omnis minus magnam quibusdam nostrum aperiam, aut non, molestiae maxime fugiat commodi officiis perspiciatis adipisci eveniet illum obcaecati quis molestias esse possimus! Aliquid cum accusamus ad laboriosam ut beatae autem. Expedita ipsum eaque, vitae dolor quibusdam quod odit reprehenderit temporibus labore sunt numquam dolorum? Natus, commodi delectus laudantium sit odio aspernatur velit voluptas, eos a repudiandae tenetur atque omnis iste perspiciatis ratione nihil amet nulla quis. Illum vitae labore suscipit aut harum nam. Quae in alias beatae voluptas cum culpa fuga, accusamus recusandae quisquam deleniti impedit numquam nisi corrupti quibusdam veniam harum nihil animi saepe nobis, asperiores nulla. Assumenda culpa facilis distinctio hic eveniet nisi nobis consequatur delectus, perspiciatis quibusdam totam accusantium sunt suscipit fuga tempore maxime rem nulla saepe, quaerat laborum dolorem provident enim! Neque ullam iure eveniet repellendus, ex labore asperiores eos maxime quo voluptatem explicabo accusantium natus cum eius magni, tenetur perspiciatis mollitia dolores est voluptas assumenda officia ipsum dignissimos. Voluptas culpa sapiente ducimus laborum dicta, temporibus nulla aliquid hic, non esse libero reiciendis reprehenderit aperiam qui officia fuga aut voluptatem molestiae vel labore eligendi repellendus totam minima? Corporis quam maiores perspiciatis in est praesentium excepturi laudantium veritatis iste cupiditate sed natus, atque eum necessitatibus repudiandae quas. Dolore quia, harum nemo temporibus cum quaerat facilis reprehenderit necessitatibus iusto sed velit odit expedita accusamus repudiandae, aspernatur deserunt. Eius voluptates vitae quo aspernatur blanditiis, quaerat rem quibusdam excepturi quam autem nam? Atque libero dolores facilis quidem minima quo debitis aliquid, facere nesciunt consequuntur ea, maxime eaque quis. Debitis temporibus animi facilis nisi rem, non aperiam architecto id aut reprehenderit recusandae molestias, repellendus aliquid, alias illum! Culpa ipsam quaerat dolorum, atque, aliquam libero quasi placeat quos, possimus veritatis aperiam. Culpa aut eos quidem harum nam explicabo consequatur, enim voluptatum blanditiis! Nisi accusantium aperiam eligendi rem, sequi, inventore officia quaerat reiciendis ipsam ab quia dolore, repellat hic corporis iste amet harum vel rerum quisquam. Laborum delectus hic velit quis eius architecto odio earum temporibus deserunt. Aliquid animi id ipsam unde possimus totam, consequuntur, libero est sunt accusantium minima vitae quod aperiam architecto, magni veritatis. Soluta voluptatibus dolorem mollitia in ex, deserunt officia deleniti enim facilis perferendis distinctio modi fugiat, nesciunt commodi possimus eveniet eum temporibus iste culpa atque! Maxime minima velit dicta omnis qui rem deleniti maiores! Soluta optio a eligendi suscipit hic unde aliquam doloremque libero. Provident cum fugiat ipsum ullam quam excepturi veritatis modi dolorum ab quod error impedit eveniet, iure repudiandae, voluptas id explicabo totam. Aperiam, accusamus beatae. Cumque dolore ipsa dignissimos libero perferendis voluptates autem nihil, accusamus ipsam harum eligendi eaque ex esse ipsum, ullam quae praesentium voluptas deserunt saepe sed error soluta? Reprehenderit illum provident ut rem explicabo? Optio, voluptate amet sunt porro, nulla laborum neque necessitatibus dolor ab distinctio iure commodi minima quia, at maiores laboriosam placeat excepturi! Laboriosam fuga et hic harum! Temporibus dolores sapiente perferendis vel necessitatibus unde totam vero excepturi eos ab animi autem asperiores blanditiis molestias sint id, impedit omnis quia fuga, ipsa cupiditate sunt ipsum dolorem dolor. Nulla facere iusto ad natus perspiciatis. Debitis corporis accusamus consectetur asperiores cum, commodi libero totam aut! Quae tempore iure ab sunt quas unde. At fuga tenetur obcaecati veritatis excepturi eum qui et. Itaque, omnis voluptates vero nihil blanditiis necessitatibus. Corporis architecto recusandae ea ad ratione dolorem voluptatum sint aliquid ut tenetur sunt illo delectus velit, tempora nostrum debitis non maiores quasi unde eveniet nisi est quam quibusdam mollitia? Mollitia soluta enim adipisci, porro veritatis unde quibusdam eligendi officiis saepe, temporibus aliquam id. Ex atque fugit qui voluptatum? Reiciendis voluptates expedita illum ullam, minima in excepturi facere. Adipisci laboriosam quod quo at alias assumenda eius necessitatibus, veniam esse. Quia delectus iste accusantium cumque quam aspernatur libero unde impedit consequatur reprehenderit quis culpa ab, repellat consectetur corrupti nemo provident sunt et animi nobis, voluptates assumenda amet aliquid numquam? Nobis quos veniam magnam voluptas minima commodi reiciendis adipisci hic architecto, consequuntur quo dolores, aut perspiciatis odio sunt quidem, distinctio pariatur tenetur quisquam! Facere, quaerat! Esse doloribus maxime facere asperiores. Ab amet delectus, culpa qui laborum at. Nam, dolore nobis assumenda tempora molestiae maxime ab quam facilis magni, adipisci placeat quae perferendis aliquid labore in optio ducimus fugiat. Facilis consectetur harum ea rerum repellat, unde reprehenderit nobis facere atque similique est quam dolorum consequuntur, ullam nam laborum in eius. Illum mollitia sed error? Dicta a rem qui magnam dolore tempora alias ipsum voluptate libero voluptatibus, aspernatur nihil! Nesciunt, maxime. Molestias necessitatibus delectus tenetur ratione fugiat, id rerum architecto quidem in eligendi maiores dolores tempora ducimus laborum ipsum magnam iusto hic exercitationem nam laboriosam quisquam quia expedita aliquam. Dolor autem minima, quidem quas ea eligendi iusto doloribus amet ipsum, reiciendis unde id laborum. Minima dolore ducimus voluptas impedit et fugiat earum maxime at architecto excepturi necessitatibus ea nemo officiis aut molestias qui distinctio, possimus aperiam a dolorem autem doloremque ex illo. Laudantium a dolorem debitis? Sunt, aspernatur repudiandae! Iure, odio magni similique praesentium dolorum facilis officiis laudantium aut quasi labore consectetur hic libero obcaecati ducimus ea est cumque voluptas repellendus tempore, quis eaque voluptatibus rerum, suscipit repellat! Blanditiis voluptate fuga dicta laboriosam ut aliquid odio eum sit accusantium corrupti vel, fugiat nam recusandae debitis atque est facere qui quia at? Tempore ut provident minima dolorum eum maiores placeat sed impedit, omnis laborum quibusdam nihil excepturi sequi maxime ab aperiam consectetur nisi magni ex animi minus esse distinctio nobis. Quis deleniti culpa illum labore debitis ratione, fugiat corrupti cum sapiente, aperiam quibusdam voluptate! Sint earum numquam quo voluptatem, temporibus distinctio maiores iste laboriosam itaque quod velit excepturi soluta dolorem cum, mollitia doloribus, illo suscipit explicabo odit! Eos odit quis tenetur cupiditate perferendis corporis necessitatibus cumque dolores deserunt quasi mollitia, voluptatem cum ad maxime quos pariatur odio velit dicta vel similique at soluta consequatur quia. Iusto, accusamus esse aperiam amet omnis odit ipsum voluptas pariatur eaque doloribus, iste officia! Quod dolorum iure fugiat deserunt corporis quisquam nihil eligendi alias tempore vitae sunt quos magnam corrupti voluptate obcaecati, sit neque nulla reprehenderit laboriosam inventore voluptas necessitatibus sequi. Reprehenderit sunt asperiores consequuntur eos et alias magni qui. Molestiae vero veniam voluptatem omnis eaque iure sint deserunt amet magnam dolores, beatae sed, voluptate sapiente aspernatur odit blanditiis eligendi ab quidem! Ullam, hic tempora facilis quis corporis eos, error odio veniam quia quod similique assumenda repellat pariatur est, architecto dolorum blanditiis laboriosam nobis. Aliquam ea nesciunt totam aliquid ratione similique et ad. Tempore voluptatum odit illo optio illum autem esse odio harum nobis ducimus. Obcaecati distinctio incidunt ea dolorum doloremque facere fugit voluptates officiis esse, omnis placeat deserunt non ratione molestias quas </p>
              
            
!

CSS

              
                .line {
   width: 0;
   background-color: yellow;
   height: 5px;
   position: fixed;
   left: 0;
   top: 0;
   transition: .3s all;
}

html {
   background-color: #333;
}
              
            
!

JS

              
                var line = document.querySelector('#line'),
    bodyHeight = document.body.clientHeight,
    doc = document.documentElement;

setTimeout(function() {
   setWidthLine();
},1000);

document.addEventListener('scroll', function() {
   setWidthLine();
});

document.addEventListener('resize', function() {
   setWidthLine();
});

function setWidthLine() {
   var scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0),
       percent;
   scrollTop += doc.clientHeight;
   
   percent = scrollTop / bodyHeight * 100;
   line.style.width = percent + '%';
}
              
            
!
999px

Console