HTML Marquee loop attribute
Last Updated :
30 Jan, 2024
The Marquee loop attribute in HTML is used to define the number of times the marquee should loop. The HTML Marquee loop attribute, when set to a positive integer, determines the number of times a marquee element will repeat its scrolling behavior. A loop value of “-1” signifies an infinite loop.
Note: The default value of the loop is INFINITE and this attribute is depreciated from HTML5.
Syntax:Â
<marquee loop="number" >
Attribute value:Â
number
|
It specifies the number of loops.
|
Example 1:Â In this example, we will see marquee loop attribute with help of a example.
html
<!DOCTYPE html>
< html >
< head >
< title >HTML Marquee loop attribute
</ title >
< style >
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "main" >
< marquee class = "marq" bgcolor = "Green"
direction = "up" loop = "1" >
< div class = "geek1" >GeeksforGeeks</ div >
< div class = "geek2" >
A computer science portal for geeks
</ div >
</ marquee >
< marquee class = "marq" bgcolor = "Green"
direction = "up" loop = "2" >
< div class = "geek1" >GeeksforGeeks</ div >
< div class = "geek2" >
A computer science portal for geeks
</ div >
</ marquee >
</ div >
</ body >
</ html >
|
Output:Â
Example 2:Â In this example, we will see marquee loop attribute with help of a example.
HTML
<!DOCTYPE html>
< html >
< head >
< title >HTML Marquee loop attribute</ title >
< style >
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "main" >
< marquee class = "marq" bgcolor = "Green"
direction = "left" loop = "1" >
< div class = "geek1" >GeeksforGeeks</ div >
< div class = "geek2" >
A computer science portal for geeks
</ div >
</ marquee >
< marquee class = "marq" bgcolor = "Green"
direction = "right" loop = "2" >
< div class = "geek1" >GeeksforGeeks</ div >
< div class = "geek2" >
A computer science portal for geeks
</ div >
</ marquee >
</ div >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 65
- Apple Safari 7.2
- Opera 1.2Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...