HTML Marquee loop attribute

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:

Supported Browsers:

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

Article Tags :

HTML

Web Technologies

HTML-Attributes