Adrenaline

Other

Adrenaline

NProgress Style Rules for a Purple Loading Indicator

Average rated: 0.00/5 with 0 ratings

Favorited 1 times

Rate this tool

Visit
Explore more top AI tools

About Adrenaline

Adrenaline is a captivating online playground designed to ignite your creativity and stimulate your mind. Imagine a space where innovative games and challenges await, each crafted to test your intellect and push your boundaries. Whether you're looking to relax with a fun puzzle or engage in a mentally rigorous activity, Adrenaline provides the perfect platform. At its core, Adrenaline focuses on offering an enriching experience that combines entertainment with cognitive growth. Dive into a world where every click unleashes a new adventure, designed meticulously to keep you engaged and coming back for more. The visually appealing interface and user-friendly design ensure that you can easily navigate through a plethora of activities. Adrenaline is more than just a pastime - it’s a journey of continuous mental evolution.

Key Features

  • Purple theme with hex color #8204b3
  • Fixed top position for the loading bar
  • 3px height for the loading bar
  • Spinner with infinite rotation animation
  • Box shadow effect on the progress bar peg
  • Customizable appearance
  • Spinner positioned at top right corner
  • Keyframe animation for spinner rotation
  • High z-index for overlay effect
  • Supports non-blocking user experience

Tags

CSSStyleLoading IndicatorNProgressWeb Development

FAQs

What color is the NProgress bar?
The NProgress bar is colored purple with the hex code #8204b3.
Where is the NProgress bar positioned on the page?
The NProgress bar is fixed at the top of the page.
How thick is the NProgress bar?
The NProgress bar has a height of 3px.
What does the `.peg` class do in NProgress?
The `.peg` class defines a box shadow and slight rotation for the end of the progress bar to make it more visually distinct.
How is the spinner styled in NProgress?
The spinner is styled with a purple border color, a border radius of 50%, and an infinite rotation animation.
Where is the spinner positioned on the page?
The spinner is fixed at the top right corner of the page.
What does the `.nprogress-custom-parent` class do?
The `.nprogress-custom-parent` class restricts scroll and sets a relative position for its child elements.
What animation is applied to the spinner?
The spinner has a keyframe animation called `nprogress-spinner` that rotates it 360 degrees.
Can I customize the color of the NProgress bar?
Yes, you can customize the color by changing the `background` property in the `.bar` class.
What z-index value is used for the NProgress bar?
The z-index value for the NProgress bar is set to 9999 to ensure it appears above other elements.