Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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="loading">
<svg version="1.1" id="wrapper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="258px" height="102px" viewBox="0 0 273 125.2" enable-background="new 0 0 273 125.2" xml:space="preserve">
	<path class="path" fill="none" stroke="#000000" color="#000000 stroke-width="1" stroke-miterlimit="5" stroke-linecap="round" stroke-linejoin="round"  fill-rule="evenodd"  fill="rgb(0, 0, 0)"
 d="M257.130,51.337 C241.268,63.254 232.866,70.970 228.494,81.344 C225.579,88.374 222.407,95.748 221.378,97.634 C219.577,100.978 218.463,101.235 215.205,101.235 C213.576,101.235 211.175,100.377 210.747,98.748 C210.575,98.148 210.489,97.462 210.489,96.862 C210.489,94.719 212.033,91.890 216.319,85.288 C222.835,75.257 223.950,77.572 233.295,55.966 L233.295,55.795 C233.295,55.709 233.209,55.623 233.124,55.623 C233.038,55.623 232.952,55.623 232.866,55.709 C229.008,59.396 225.322,63.511 221.035,63.511 C220.177,63.511 219.234,63.340 218.463,62.997 C216.662,62.225 214.862,60.596 213.319,59.053 C212.890,58.624 212.718,58.367 212.718,56.566 C212.718,52.880 214.347,50.479 215.205,48.593 C216.234,46.364 220.606,40.791 223.607,37.447 C232.609,27.330 239.639,26.559 239.982,26.559 C243.669,26.559 247.013,27.845 248.813,30.246 C249.585,31.274 249.756,32.217 249.756,33.246 C249.756,34.532 249.671,35.475 249.070,36.590 C240.154,52.537 238.353,57.424 238.353,58.367 C238.353,58.624 238.439,58.710 238.696,58.710 C242.983,55.023 248.042,51.508 253.014,48.593 C254.472,47.736 254.643,47.736 255.072,47.736 C255.844,47.736 256.787,48.079 257.301,48.593 C257.644,48.936 257.815,49.450 257.815,49.879 C257.815,50.050 257.815,50.822 257.130,51.337 ZM243.583,34.018 C243.755,33.761 243.841,33.589 243.841,33.418 C243.841,33.246 243.669,33.075 243.669,32.903 C243.669,32.646 243.669,32.389 242.812,32.046 C242.383,31.874 241.869,31.789 241.354,31.789 C239.811,31.789 238.611,32.646 237.410,33.589 C235.696,34.961 235.010,35.047 233.809,36.161 C229.180,40.448 222.492,48.507 220.692,52.708 C220.177,53.909 219.663,55.452 219.663,55.966 C219.663,56.309 220.349,56.652 220.692,56.652 C221.121,56.652 221.721,56.652 222.407,56.223 C230.123,51.337 238.353,41.906 243.583,34.018 ZM202.857,50.565 C202.343,52.280 201.828,56.566 201.828,58.281 C201.828,59.824 202.343,61.110 202.514,61.968 C202.771,63.511 204.915,64.626 205.515,65.054 C206.201,65.569 206.801,66.169 206.801,67.026 C206.801,67.626 206.201,69.084 204.572,69.084 C203.886,69.084 201.142,68.827 200.114,67.884 C198.913,66.769 197.885,66.426 196.770,64.883 C195.741,63.511 195.312,61.711 195.312,59.567 C195.312,54.509 196.084,53.051 196.084,52.794 C196.084,52.623 195.998,52.451 195.827,52.451 C195.655,52.451 195.570,52.451 195.312,52.794 C191.797,57.424 189.482,60.339 187.425,63.254 C185.624,65.826 184.938,65.740 183.738,67.026 C183.052,67.798 181.337,67.969 180.566,67.969 C179.537,67.969 175.507,65.397 174.393,64.025 C174.050,63.597 173.793,62.482 173.793,61.539 C173.793,58.881 174.564,58.281 174.822,56.395 C175.165,53.909 177.565,48.079 179.023,44.735 C181.595,38.819 183.567,34.704 187.339,28.959 C188.025,27.931 187.939,27.759 188.711,27.073 C189.397,26.473 190.425,26.216 191.712,26.216 C193.683,26.216 194.798,26.730 195.141,27.502 C195.312,27.931 195.570,28.617 195.570,29.045 C195.570,29.988 195.141,31.532 193.683,33.075 C192.740,34.104 190.340,36.847 188.196,40.791 C186.996,43.020 184.938,47.135 182.109,54.166 C181.509,55.709 180.394,59.910 180.394,60.167 C180.394,60.510 180.394,61.025 180.652,61.025 C181.166,61.025 181.509,60.767 182.109,59.910 C193.683,43.449 200.028,40.019 201.914,35.990 C203.457,32.732 203.800,32.475 204.915,32.475 C206.201,32.475 206.630,33.246 208.001,33.332 C208.944,33.418 209.716,34.618 209.716,35.647 C209.716,35.990 209.287,37.190 208.859,37.876 C205.772,42.934 204.143,46.192 202.857,50.565 ZM174.392,16.871 C172.677,16.871 171.391,15.928 170.963,15.156 C170.534,14.299 170.362,13.184 170.362,12.241 C170.362,11.041 170.705,9.583 171.477,8.640 C172.334,7.611 173.878,7.183 175.678,7.183 C177.050,7.183 178.679,7.611 179.279,8.297 C180.136,9.240 180.308,10.269 180.308,11.126 C180.308,11.641 180.222,12.241 179.879,12.670 C178.336,14.556 176.278,16.871 174.392,16.871 ZM171.391,27.845 C171.391,32.389 167.876,34.532 165.904,38.733 C164.447,41.906 162.046,47.736 160.846,50.908 C159.388,54.766 158.788,58.024 158.788,59.310 C158.788,60.082 158.874,62.054 160.331,62.054 C162.217,62.054 163.161,61.539 166.590,59.138 C168.648,57.681 169.248,57.252 170.620,57.252 C171.305,57.252 172.249,57.424 172.763,57.852 C173.277,58.281 173.277,58.710 173.277,59.053 C173.277,59.996 172.763,60.510 171.906,61.368 L168.390,64.626 C166.590,66.255 163.418,68.741 159.560,68.741 C156.988,68.741 154.073,65.140 153.129,61.968 C152.787,60.767 152.701,59.567 152.701,58.367 C152.701,56.223 153.044,54.337 154.073,51.422 C154.673,49.793 155.016,48.336 155.530,47.135 C158.188,40.877 160.674,34.704 163.846,28.102 C164.704,26.302 166.504,25.787 168.133,25.787 C168.991,25.787 170.105,25.959 170.705,26.473 C171.134,26.816 171.391,27.073 171.391,27.845 ZM159.558,11.898 C154.585,19.871 148.069,28.531 145.240,36.333 L143.868,40.105 C138.724,54.509 137.352,60.767 137.352,63.854 C137.352,66.940 138.038,67.969 138.038,68.655 C138.038,68.912 137.952,68.998 137.695,69.255 C136.495,70.456 136.752,71.056 134.609,71.056 C133.837,71.056 131.608,69.941 131.522,69.427 C131.179,67.455 131.008,65.654 131.008,63.854 C131.008,59.396 131.951,55.709 133.237,51.165 C133.923,48.764 135.895,45.164 135.895,44.992 C135.895,44.906 135.895,44.821 135.723,44.821 C135.552,44.821 135.380,44.992 134.866,45.592 C128.007,53.566 121.320,61.968 112.917,67.026 C112.060,67.541 111.031,67.626 110.345,67.626 C108.631,67.626 104.601,65.569 104.258,64.969 C103.315,63.340 102.801,61.796 102.801,60.082 C102.801,57.681 103.744,54.852 105.801,50.908 C109.917,43.106 116.690,36.418 123.892,31.617 C125.178,30.760 127.835,29.988 130.065,29.988 C131.008,29.988 131.865,30.160 132.465,30.417 C133.580,30.931 135.466,31.360 136.495,32.046 C136.923,32.046 137.095,32.046 137.181,31.960 C146.097,22.272 149.784,11.384 157.157,1.695 C157.672,1.010 158.015,0.667 159.129,0.667 C160.244,0.667 163.330,2.038 163.330,3.496 C163.330,5.468 162.644,6.582 161.530,8.211 C160.758,9.326 160.501,10.441 159.558,11.898 ZM131.694,35.047 C130.836,35.047 130.236,35.132 129.550,35.475 C121.234,39.676 113.089,48.764 109.574,58.195 C109.488,58.453 109.317,59.053 109.317,59.310 C109.317,60.167 109.488,61.282 109.917,61.282 C110.260,61.282 110.431,61.196 110.774,60.939 C111.288,60.510 111.803,60.510 112.575,59.910 C119.948,54.166 126.292,46.450 131.865,38.991 C132.894,37.619 133.666,37.362 133.666,35.904 C133.666,35.390 133.065,35.047 131.694,35.047 ZM93.368,52.623 C92.768,55.023 92.168,57.595 92.168,60.253 C92.168,62.482 92.682,64.711 93.968,66.683 C94.054,66.855 94.140,67.026 94.140,67.198 C94.140,67.369 93.797,68.226 92.339,68.398 C91.825,68.484 91.224,68.741 90.710,68.741 C89.424,68.741 87.538,68.141 87.023,67.026 C85.909,64.540 85.566,62.054 85.566,59.653 C85.566,57.081 85.909,55.623 85.909,55.366 C85.909,55.023 85.909,54.937 85.566,54.937 C85.223,54.937 84.451,55.538 83.508,56.481 L78.879,60.767 C74.420,64.969 71.677,66.169 68.676,67.198 C68.162,67.369 67.647,67.541 67.304,67.541 C66.361,67.541 65.332,66.940 61.303,63.682 C60.874,63.340 59.416,61.882 59.416,58.624 C59.416,55.795 60.360,52.194 64.561,45.935 C69.619,38.390 74.335,34.961 76.907,33.075 C81.108,29.988 85.566,27.759 90.624,26.302 C91.224,26.130 91.910,26.044 92.511,26.044 C94.482,26.044 96.197,26.988 97.740,28.531 C98.169,28.959 98.855,29.731 99.026,30.246 C99.369,31.103 100.141,31.874 101.084,31.874 C101.513,31.874 102.799,31.960 103.485,32.989 C103.656,33.246 103.656,33.332 103.656,33.503 C103.656,33.846 103.485,34.189 103.313,34.447 C99.541,39.591 94.997,46.021 93.368,52.623 ZM93.539,31.360 C93.282,31.360 91.996,31.617 90.882,32.217 C82.822,36.504 76.478,41.220 71.591,47.135 C67.990,51.508 65.161,56.566 65.161,59.053 C65.161,60.082 65.504,61.368 67.047,61.368 C67.733,61.368 69.705,60.425 71.248,58.967 C79.221,51.508 88.224,45.764 92.596,37.619 C93.196,36.504 94.140,35.304 95.083,34.361 C95.340,34.104 95.511,33.589 95.511,33.075 C95.511,32.475 94.997,31.360 93.539,31.360 ZM64.216,37.104 C62.502,37.362 60.015,38.219 57.786,38.562 C56.071,38.819 55.043,38.819 54.442,38.819 C53.756,38.819 53.585,38.905 53.414,39.505 C51.184,48.679 48.098,56.652 42.611,62.482 C40.210,65.054 37.895,67.541 34.895,67.541 C34.123,67.541 33.351,67.369 32.837,67.112 C29.579,65.569 27.178,63.682 26.407,61.711 C25.464,59.310 25.121,56.738 25.121,54.594 C25.121,47.564 28.636,41.391 32.580,35.475 C33.780,33.675 33.780,34.104 34.637,32.903 C37.381,29.045 40.982,25.016 44.754,25.016 C46.126,25.016 47.841,25.359 49.298,26.645 C49.984,27.245 50.241,27.416 50.499,28.102 C51.270,30.246 52.385,32.818 54.871,32.818 C58.300,32.818 60.272,32.560 62.244,32.560 C64.988,32.560 67.560,33.418 67.560,34.790 C67.560,35.904 65.417,36.161 65.159,36.590 C64.988,36.933 64.816,37.019 64.216,37.104 ZM46.640,34.704 C46.555,34.104 46.383,34.018 46.126,33.761 C45.697,33.332 45.526,32.818 45.440,32.475 C45.183,31.617 44.926,31.017 44.583,31.017 C44.240,31.017 43.725,31.360 43.297,31.874 C42.954,32.303 42.096,32.732 41.668,33.332 C39.010,36.676 30.951,47.307 30.951,57.338 C30.951,57.595 30.951,57.938 31.208,58.538 C31.465,59.224 32.494,60.853 33.266,61.368 C33.523,61.539 33.780,61.539 34.037,61.539 C34.895,61.539 35.323,61.025 35.666,60.853 C36.266,60.596 36.438,60.339 37.124,59.310 C42.096,51.851 46.726,45.164 46.726,36.504 C46.726,36.161 46.726,35.132 46.640,34.704 ZM9.944,48.679 C8.573,52.194 6.687,55.452 6.687,59.224 C6.687,60.253 6.772,61.282 7.115,62.396 C7.372,63.168 8.058,63.425 8.830,63.425 C9.344,63.425 9.859,63.340 10.287,63.082 C14.060,60.767 18.261,53.480 22.205,53.480 C22.891,53.480 25.120,54.080 25.120,55.452 C25.120,56.566 24.262,56.909 23.405,57.852 C19.032,62.568 15.517,69.084 8.916,69.084 C8.316,69.084 1.199,67.198 0.342,62.482 C0.171,61.539 0.085,60.596 0.085,59.567 C0.085,55.623 1.885,51.679 3.772,46.793 C7.458,37.190 15.089,23.472 21.605,12.327 C23.062,9.840 23.576,5.039 26.920,5.039 C28.120,5.039 28.806,4.868 29.749,4.868 C30.607,4.868 31.550,5.211 31.979,5.811 C32.493,6.582 32.664,7.354 32.664,8.211 C32.664,9.326 32.322,10.355 31.807,11.212 C24.005,23.815 15.003,35.304 9.944,48.679 Z"/>
</svg>
</div>
!

CSS 

              
                body {
  background-color: #e4e4e4;
}

.loading {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: dash 5s linear  infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 2000;
    fill: #be7cba;
  }
  60% {
    fill: #be7cba;
  }
  70% {
    stroke-dashoffset: 0;
    fill: #000;
  }
  100% {
    fill: #000;
  }
}
!

JS
!
999px

Console