-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
327 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| .ui-progress-spinner { | ||
| position: relative; | ||
| margin: 0 auto; | ||
| width: 100px; | ||
| height: 100px; | ||
| display: inline-block; | ||
|
|
||
| &:before { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
|
|
||
| .ui-progress-spinner-svg { | ||
| animation: ui-progress-spinner-rotate 2s linear infinite; | ||
| height: 100%; | ||
| transform-origin: center center; | ||
| width: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .ui-progress-spinner-circle { | ||
| stroke-dasharray: 1, 200; | ||
| stroke-dashoffset: 0; | ||
| animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, ui-progress-spinner-color 6s ease-in-out infinite; | ||
| stroke-linecap: round; | ||
| } | ||
|
|
||
| @keyframes ui-progress-spinner-rotate { | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes ui-progress-spinner-dash { | ||
| 0% { | ||
| stroke-dasharray: 1, 200; | ||
| stroke-dashoffset: 0; | ||
| } | ||
| 50% { | ||
| stroke-dasharray: 89, 200; | ||
| stroke-dashoffset: -35px; | ||
| } | ||
| 100% { | ||
| stroke-dasharray: 89, 200; | ||
| stroke-dashoffset: -124px; | ||
| } | ||
| } | ||
|
|
||
| @keyframes ui-progress-spinner-color { | ||
| 100%, | ||
| 0% { | ||
| stroke: #d62d20; | ||
| } | ||
| 40% { | ||
| stroke: #0057e7; | ||
| } | ||
| 66% { | ||
| stroke: #008744; | ||
| } | ||
| 80%, | ||
| 90% { | ||
| stroke: #ffa700; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React = require("react"); | ||
|
|
||
| interface ProgressSpinnerProps { | ||
| id?: string; | ||
| style?: object; | ||
| className?: string; | ||
| strokeWidth?: string; | ||
| fill?: string; | ||
| animationDuration?: string | ||
| } | ||
|
|
||
| export class ProgressSpinner extends React.Component<ProgressSpinnerProps,any> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React, {Component} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| export class ProgressSpinner extends Component { | ||
|
|
||
| static defaultProps = { | ||
| id: null, | ||
| style: null, | ||
| className: null, | ||
| strokeWidth: "2", | ||
| fill: "none", | ||
| animationDuration: "2s" | ||
| }; | ||
|
|
||
| static propTypes = { | ||
| id: PropTypes.string, | ||
| style: PropTypes.object, | ||
| className: PropTypes.string, | ||
| strokeWidth: PropTypes.string, | ||
| fill: PropTypes.string, | ||
| animationDuration: PropTypes.string | ||
| }; | ||
|
|
||
| render() { | ||
| let spinnerClass = classNames('ui-progress-spinner',this.props.className); | ||
|
|
||
| return <div id={this.props.id} style={this.props.style} className={spinnerClass}> | ||
| <svg className="ui-progress-spinner-svg" viewBox="25 25 50 50" style={{animationDuration: this.props.animationDuration}}> | ||
| <circle className="ui-progress-spinner-circle" cx="50" cy="50" r="20" fill={this.props.fill} | ||
| strokeWidth={this.props.strokeWidth} strokeMiterlimit="10"/> | ||
| </svg> | ||
| </div>; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| import React, {Component} from 'react'; | ||
| import {Link} from 'react-router-dom'; | ||
| import {ProgressSpinner} from '../../components/progressspinner/ProgressSpinner'; | ||
| import {TabView,TabPanel} from '../../components/tabview/TabView'; | ||
| import {CodeHighlight} from '../codehighlight/CodeHighlight'; | ||
|
|
||
| export class ProgressSpinnerDemo extends Component { | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className="content-section introduction"> | ||
| <div className="feature-intro"> | ||
| <h1>ProgressSpinner</h1> | ||
| <p>ProgressSpinnerDemo is a process status indicator.</p> | ||
| </div> | ||
| </div> | ||
| <div className="content-section implementation"> | ||
| <h3 className="first">Basic</h3> | ||
| <ProgressSpinner/> | ||
|
|
||
| <h3>Custom</h3> | ||
| <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/> | ||
| </div> | ||
|
|
||
| <ProgressSpinnerDoc/> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class ProgressSpinnerDoc extends Component { | ||
|
|
||
| shouldComponentUpdate(){ | ||
| return false; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="content-section source"> | ||
| <TabView effect="fade"> | ||
| <TabPanel header="Documentation"> | ||
| <h3>Import</h3> | ||
| <CodeHighlight className="javascript"> | ||
| {` | ||
| import {ProgressSpinner} from 'primereact/components/progressspinner/ProgressSpinner'; | ||
| `}</CodeHighlight> | ||
|
|
||
| <h3>Getting Started</h3> | ||
| <p>ProgressSpinner is defined using ProgressSpinner element.</p> | ||
| <CodeHighlight className="html"> | ||
| {` | ||
| <ProgressSpinner/> | ||
| `} | ||
| </CodeHighlight> | ||
|
|
||
| <h3>Colors</h3> | ||
| <p>Colors of the spinner can be changed by overriding the keyframes animation</p> | ||
| <CodeHighlight className="css"> | ||
| {` | ||
| @keyframes ui-progress-spinner-color { | ||
| 100%, | ||
| 0% { | ||
| stroke: #d62d20; | ||
| } | ||
| 40% { | ||
| stroke: #0057e7; | ||
| } | ||
| 66% { | ||
| stroke: #008744; | ||
| } | ||
| 80%, | ||
| 90% { | ||
| stroke: #ffa700; | ||
| } | ||
| } | ||
| `} | ||
| </CodeHighlight> | ||
|
|
||
| <h3>Attributes</h3> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>id</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Unique identifier of the element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>style</td> | ||
| <td>object</td> | ||
| <td>null</td> | ||
| <td>Inline style of the element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>className</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Style class of the element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>strokeWidth</td> | ||
| <td>string</td> | ||
| <td>2</td> | ||
| <td>Width of the circle stroke.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>fill</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Color for the background of the circle.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>animationDuration</td> | ||
| <td>string</td> | ||
| <td>2s</td> | ||
| <td>Duration of the rotate animation.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <h3>Styling</h3> | ||
| <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Element</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>ui-progress-spinner</td> | ||
| <td>Container element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>ui-progress-circle</td> | ||
| <td>SVG element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>ui-progress-path</td> | ||
| <td>Circle element.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <h3>Dependencies</h3> | ||
| <p>None.</p> | ||
| </TabPanel> | ||
|
|
||
| <TabPanel header="Source"> | ||
| <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/progressspinner" className="btn-viewsource" target="_blank"> | ||
| <i className="fa fa-github"></i> | ||
| <span>View on GitHub</span> | ||
| </a> | ||
| <CodeHighlight className="javascript"> | ||
| {` | ||
| export class ProgressSpinnerDemo extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className="content-section introduction"> | ||
| <div className="feature-intro"> | ||
| <h1>ProgressSpinner</h1> | ||
| <p>ProgressSpinnerDemo is a process status indicator.</p> | ||
| </div> | ||
| </div> | ||
| <div className="content-section implementation"> | ||
| <h3 className="first">Basic</h3> | ||
| <ProgressSpinner/> | ||
| <h3>Custom</h3> | ||
| <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/> | ||
| </div> | ||
| <ProgressSpinnerDoc/> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| `} | ||
| </CodeHighlight> | ||
| </TabPanel> | ||
| </TabView> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| } |