Line length Open
For the bouncing loader, you'll need a parent with three elements, one for each ball. Use `@keyframes` to define a bouncing animation, using the `opacity` and `transform` properties. Use a single axis translation on `transform: translate3d()` to achieve better animation performance.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
For the donut spinner, you'll need a single element. Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading indicator for the donut. Define and use an appropriate animation, using `transform: rotate()` to rotate the element.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
For the container, you'll have to set `display: flex` and `justify-content: center` to position the balls in the center. Give each ball the same `width` and `height` and `border-radius: 50%` to make them circular. Apply the animation to each ball, using a different `animation-delay` for each and `animation-direction: alternate` to create the appropriate effect.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
For the pulse loader, you'll need a parent container with two child elements, one for each ring. Use `@keyframes` to define an animation at two points in the cycle. At the start (`0%`), the two child elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both elements have increased `width` and `height`, but their `position` is reset to `0`. Use `opacity` to transition from `1` to `0` when animating to give them a disappearing effect as they expand.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Bare URL used Open
https://codepen.io/chalarangelo/pen/LYwVvVr- Read upRead up
- Exclude checks
MD034 - Bare URL used
Tags: links, url
Aliases: no-bare-urls
This rule is triggered whenever a URL is given that isn't surrounded by angle brackets:
For more information, see http://www.example.com/.To fix this, add angle brackets around the URL:
For more information, see <http:></http:>.Rationale: Without angle brackets, the URL isn't converted into a link in many markdown parsers.
Note: if you do want a bare URL without it being converted into a link, enclose it in a code block, otherwise in some markdown parsers it will be converted:
`http://www.example.com`First header should be a top level header Open
## Bouncing ball loader- Read upRead up
- Exclude checks
MD002 - First header should be a top level header
Tags: headers
Aliases: first-header-h1
Parameters: level (number; default 1)
This rule is triggered when the first header in the document isn't a h1 header:
## This isn't a H1 header
### Another headerThe first header in the document should be a h1 header:
# Start with a H1 header
## Then use a H2 for subsectionsLine length Open
Loading indicators are a staple of modern web design. They keep users engaged while they wait for content to load. With a little HTML and CSS, you can create a variety of loaders to suit your needs. Here are some examples to get you started.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
Set a predefined `width` and `height` for the parent container and use `position: relative` to position its children. Use `animation-delay` on the second child, so that each element starts its animation at a different time.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.
Line length Open
excerpt: Loading indicators are a staple of modern web design. Here are some CSS loaders to keep your users engaged while they wait.- Read upRead up
- Exclude checks
MD013 - Line length
Tags: line_length
Aliases: line-length Parameters: linelength, codeblocks, tables (number; default 80, boolean; default true)
This rule is triggered when there are lines that are longer than the configured line length (default: 80 characters). To fix this, split the line up into multiple lines.
This rule has an exception where there is no whitespace beyond the configured line length. This allows you to still include items such as long URLs without being forced to break them in the middle.
You also have the option to exclude this rule for code blocks and tables. To
do this, set the code_blocks and/or tables parameters to false.
Code blocks are included in this rule by default since it is often a requirement for document readability, and tentatively compatible with code rules. Still, some languages do not lend themselves to short lines.