react-kino
Components

Progress

Fixed scroll progress indicator with bar, dots, and ring styles.

Overview

<Progress> is a fixed scroll progress indicator. It supports bar, dots, and ring visual styles and can be positioned on any edge of the viewport.

Usage

import { Progress } from "react-kino";
 
{/* Simple top bar */}
<Progress />
 
{/* Ring indicator in the corner */}
<Progress type="ring" position="bottom" color="#10b981" ringSize={40} />
 
{/* Dot pagination on the right */}
<Progress type="dots" position="right" dotCount={8} color="#fff" />

Props

PropTypeDefaultDescription
type"bar" | "dots" | "ring""bar"Visual style of the indicator
position"top" | "bottom" | "left" | "right""top"Fixed position on screen
colorstring"#3b82f6"Color of the progress fill / active dots / ring stroke
trackColorstring"transparent"Background / inactive color
progressnumber--Progress override (0-1). If omitted, reads page scroll progress
dotCountnumber5Number of dots (only for "dots" type)
ringSizenumber48Diameter in pixels (only for "ring" type)
classNamestring--CSS class for the wrapper

Example: Red progress bar

<Kino>
  <Progress type="bar" color="#dc2626" />
  {/* rest of your page */}
</Kino>

Previous

HorizontalScroll

Next

VideoScroll

On this page