REACT_reactstrap Spinner

Spinner 사용하기 

: Spinner 패키지는 어떤 작업이 진행되고 있음을 표시하는, 움직이는 원 형태의 디자인을 제공한다

색상, 너비, 높이 값을 지정할 수 있다 

 

- R053_ReactstrapSpinner.js

import React, { Component } from 'react';
import { Spinner} from 'reactstrap';

class R053_ReactstrapSpinner extends Component {
    render() {
        return(
            <>
            <Spinner color="secondary"/>
            <Spinner color="success"/>
            <Spinner type="grow" color="dark"/>
            <Spinner type='grow' color="info"/>
            <Spinner size="sm" color="primary"/>
            <Spinner style={{width: "10em", height:"0.5em"}} color="dark"/><br/>
            <Spinner style={{width: "10em", height:"10em"}} color="secondary"/><br/>
            <Spinner style={{width: "3em", height:"0.5em"}} color="grow"/><br/>
            </>
        )
    }
}

export default R053_ReactstrapSpinner;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapSpinner from './R053_ReactstrapSpinner'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapSpinner/>
    </div>
  );
}

export default App;

 

 

결과

 

App을 실행하면 빙글빙글 회전한다