🎨
Valence
🎨
Valence
  • Overview
    • 👋Welcome to Valence
    • 🏄‍♂️Getting started
  • Core Concepts
    • Responsiveness
    • Color
      • List of colors
      • Color types
    • Polymorphism
  • Valence Core
    • 🏃‍♂️Fundamentals
      • 🎬The ValenceProvider
      • ✍️Using custom fonts
    • 🧱Components
      • 🔘Buttons
        • Button with icon
        • Grid Button
        • Text button
        • Icon button
        • Multi-part button
        • Unstyled button
        • Primitive button
      • ⌨️Inputs
        • Color Picker
        • Text input
        • Text area
        • Number input
        • Select input
        • Switch
        • Slider
        • Range slider
        • Pill selector
        • Input container
        • Dropdown container
      • 🖥️Display
        • Accordion
        • Alert
        • Color Swatch
        • Icon
        • Image
        • Avatar
        • Avatar Group
        • Loader
        • Pill
        • Spoiler
        • Stepper
        • Text
        • Title
      • 🧩Layout
        • App Container
        • Card
        • Flex
          • Flex Center
          • Styled Flex
        • Floating Toolbar
        • Grid
        • Header
        • Overflow Container
        • Space
      • 🗺️Navigation
        • App Nav
      • 🔼Overlays
        • Modal
        • Tooltip
        • Modal background
        • 📰Sheets
          • Bottom Sheet
          • Dynamic Sheet
          • Side Sheet
    • 🪝Hooks
      • UseColorScheme
      • UseColors
      • UseControlledList
      • UseDetectKeyDown
      • UseDisclosure
      • UseFloating
      • UseTooltip
      • UseBreakpoint
      • UseResponsiveProps
    • 🤚Generics
      • Generic button props
      • Generic input props
      • Generic Sheet Props
  • Valence Plugins
    • 🎠Valence Carousel
      • Carousel Child Props
  • Valence Utils
    • ✋Generics
      • Clickable
      • Events
      • Global
      • Grid
      • Layout
      • Overlay
      • Polymorphic
    • 🧜‍♀️Polymorphism
      • Polymorphic Button
      • Polymorphic Layout
      • Polymorphic Text
  • Update Notes
    • 3.0.0
    • 2.7.0
    • 2.6.0
    • 2.5.0
    • 2.4.0
    • 2.3.0
    • 2.2.0
    • 2.1.0
    • 2.0.0
Powered by GitBook
On this page
  • Usage
  • Custom size & color
  • Props

Was this helpful?

Edit on GitHub
  1. Valence Core
  2. Components
  3. Display

Loader

Last updated: 2.0.0 (21/01/2024)

Usage

import { Loader } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Loader />
    )
}

Custom size & color

By default, the size and color of the Loader will be inherited from the ValenceProvider.

import { Loader } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Loader 
            size="lg"
            color="blue"
        />
    )
}

Props

Extends GenericProps.

Property
Type
Description

size

ComponentSize

Sets element size class. Defaults to theme default.

color

CSSProperties["color"]

Color of the loader. Defaults to theme default.

PreviousAvatar GroupNextPill

Last updated 1 year ago

Was this helpful?

🧱
🖥️