Open In App

HTML Marquee loop attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

Attribute Value

Description

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:

der

Supported Browsers:

  • Google Chrome 1
  • Edge 12
  • Firefox 65
  • Apple Safari 7.2
  • Opera 1.2 


Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads